griglia coi css

[wanttobefree]

Se in una tabella ricorro al css, l'output e di solo un bordo di contorno a tutta la tabella e non una "griglia" cioè non vengono delimitate tutte le celle.
Come invece avviene con l'attributo border specificato nella table.

Esiste qualche istruzione css per modificare il bordo in modo che ricopra tutte le celle?
Perchè non l'ho trovato, ho trovato solo stili di bordi ma tutti rigorosamente attorno come riquadro e basta.
Grazie

[nuky]

Devi applicare i bordi anche ai td.

<style>
  table, td {border: 1px solid red;}
</style>
<table>
  <tr><td>aaa</td><td>aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td></tr>
</table>

[wanttobefree]

Originariamente inviato da nuky
Devi applicare i bordi anche ai td.

<style>
  table, td {border: 1px solid red;}
</style>
<table>
  <tr><td>aaa</td><td>aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td></tr>
</table>

ma così mi divide la tabella in "quadretti", ogni cella ha il suo riquadro che è separato dalla tabella.
Cioè io vorrei creare proprio una grata dove le celle si differenziano tramite una sola linea e non due.

cioè per capirci, il risultato che ottengo è questo:

 ---------   ---------
|         | |         |
 ---------   ---------

invece vorrei ottenere questo (cioè come con <table border="1">):

 -----------------------------------
|           |           |           |
 -----------------------------------

[nuky]

Puoi fare così allora.

<style>
  table {background-color: red;}
  td {background-color: #FFF;}
</style>
<table cellspacing="1">
  <tr><td>aaa</td><td>aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td></tr>
</table>

Il rosso non è più dato dal bordo, ma è lo sfondo dell'oggetto TABLE. Mettendo cellspacig="1" separi i TD con fondo bianco, in modo che tra di loro si veda lo sfondo della tabella.

[nuky]

Comunque <table border="1" non fa altro che impostare i bordi dell'oggetto table e di tutti gli oggetti td al suo interno, cioè la stessa cosa che ti ho postato prima tramite css.

Quello che hai chiesto tu (ottenere un bordo di un solo pixel tra una cella e l'altra) non lo potrai mai ottenere con l'attributo border, perché a causa degli oggetti confinanti avrai sempre un bordo di almeno 2px.

Un altra soluzione, sempre tramite css, sarebbe quella di impostare un solo bordo dei due confinanti per ogni contatto tra due oggetti (td o table).

[nuky]

Una cosa così per intenderci. Fa un po' schifo, ma mi sono divertito a farla.

<style>
  td {border-top: 1px solid red; border-left: 1px solid red;}
  .destra {border-right: 1px solid red;}
  .sotto {border-bottom: 1px solid red;}
</style>
<table cellspacing="0">
  <tr><td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr><td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr><td class="sotto">aaa</td><td class="sotto">aaa</td><td class="sotto">aaa</td><td class="destra sotto">aaa</td></tr>
</table>

Edit: Così è un po' meglio.

<style>
  td {border-top: 1px solid red; border-left: 1px solid red;}
  .destra {border-right: 1px solid red;}
  TR.sotto TD {border-bottom: 1px solid red;}
</style>
<table cellspacing="0">
  <tr>              <td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr>              <td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr>              <td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr>              <td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr>              <td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
  <tr class="sotto"><td>aaa</td><td>aaa</td><td>aaa</td><td class="destra">aaa</td></tr>
</table>

[wanttobefree]

Originariamente inviato da nuky
[cut]
Il rosso non è più dato dal bordo, ma è lo sfondo dell'oggetto TABLE. Mettendo cellspacig="1" separi i TD con fondo bianco, in modo che tra di loro si veda lo sfondo della tabella.

perfetto.. risolto!
grazie