bordi tabella come tris

**supermac** · 27-04-2009, 14:28

Titolo esplicativo!
Devo fare una decina di tabelle con numero di colonne e righe variabili diverso da tabella a tabella: mi piacerebbe che avessero un filino sottile che separa le celle ma che non avessero il bordo esterno, proprio come lo schema del tris o il tasto cancelletto :-)

si può fare coi fogli di stile?

Mi han suggerito di usare delle celle vuote dandogli larghezza 1px (per i separatori di colonna) o altezza 1px (per i separatori di riga) e colore di sfondo ma mi pare una soluzione abominevole...

**supermac** · 27-04-2009, 14:38

another suggerimento che mi han dato è di mettere un'immagine di sfondo con i bordi delle celle...

ma via css si puote far meglio?

**Mich_** · 27-04-2009, 15:31

Due suggerimenti sbagliati dal punto di vista semantico.
Il primo e` anche anti-accessibile e contrario alle richieste dei motori (chi non "vede" la pagina non puo` capire perche` un buon numero di celle sono vuote); il secondo fallisce se l'utente incrementa le dimensioni del font.

La cosa e` risolvibile con i CSS, ma non so dirti la strategia migliore: infatti le tabelle e` necessario che siano prima di tutto semanticamente corrette.

Comunque pensando ad una tabella del tipo:

codice:

<table>
  <caption>titolo</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>tit col1</th>
      <th>tit col2</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="nobordi">...</th>
      <td>cont col1</td>
      <td>cont col2</td>
      ...
    </tr>
  </tbody>
</table>

La cosa si risolve facilmente con:

codice:

tbody td {
  border: 1px 0 0 1px #f00 solid;
}
tbody th {
  border: 1px 0 0 0 #f00 solid;
}
thead th {
  border: 0 0 0 1px #f00 solid;
}
.nobordi {
  border: 0;
}

**supermac** · 27-04-2009, 15:53

forse ho implementato male ma non funzia, anzi è pure diverso l'effetto in IE e FF:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
tbody td {
border: 1px 0 0 1px #000 solid;
}
tbody th {
border: 1px 0 0 0 #000 solid;
}
thead th {
border: 0 0 0 1px #000 solid;
}
.nobordi {
border: 0;
}
</style>
</head>
<body>
<table>
<caption>tabella</caption>
<thead>
<tr>
<th>codice</th>
<th>diametro mm.

diameter mm.</th>
<th>1 rocch. = mtl

1 roll = mtl</th>
</tr>
</thead>
<tbody>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
<tr>
<th class="nobordi">TOU200</th>
<td>2,00</td>
<td>850</td>
</tr>
</tbody>
</table>

</body>
</html>

risultato in IE e FF

**Mich_** · 27-04-2009, 16:16

Mi sono scappati un paio di errori:
1. il nobordi va inserito nel primo <th> della <thead>, non in utti gli altri.
2. l'ordine degli attributi e`: width style color, quindi va scritto
border: 1px 0 0 1px solid black; /* con le modifiche dei vari casi */

Comunque e` difficile seguire un programma inserito senza usare i codici VB corretti.
Devi usare il [ code ] , non il [ quote ] !

**supermac** · 27-04-2009, 16:33

grazie, scusami per la "formattazione da bandito"
...
però continuo a non visualizzare quello che vorrei... chiedo troppo se ti domando di farmi a mò di esempio una tabellina con 9 celle e le divisioni come uno schema di tris?

ahia, no non lo chiedo più, ahia, ahia, perdono, non c'ho la mutua, non c'ho il paracadute, ahia....

**Mich_** · 27-04-2009, 17:00

Quello che hai fatto prima (salvo gli erorri), dovrebbe essere corretto.
Lascia perdere IE per il momento: quello si sistema dopo quando la cosa funziona nei browser standard.

Comunque ecco quello che farei

codice:

HTML:
<table>
  <caption>titolo</caption>
  <thead>
    <tr>
      <th class="nobordi">codice</th>
      <th>diametro [mm]
diameter [mm]</th>
      <th>1 rocch. = mtl
1 roll = mtl</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>TOU200</th>
      <td>2,00</td>
      <td>850</td>
    </tr>
    </tr>
      <th>TOU200</th>
      <td>2,00</td>
      <td>850</td>
    </tr>
    </tr>
      <th>TOU200</th>
      <td>2,00</td>
      <td>850</td>
    </tr>
  </tbody>
</table>

CSS:
tbody td {
  border: 1px 0 0 1px solid black;
}
tbody th {
  border: 1px 0 0 0 solid black;
}
thead th {
  border: 0 0 0 1px solid black;
}
thead th .nobordi {
  border: 0;
}

Dimenticavo: userei XHTML 1.0 Strict, che e` la DTD in cui i CSS esprimono tutta la loro migliore potenza (le altre DTD lasciano qualcosa al browser)

**supermac** · 27-04-2009, 17:18

risultato in FF

**Mich_** · 27-04-2009, 17:44

Ci dev'essere un errore, ma non riesco a capire dove.

Hai la pagina in linea? Poi postare illink?

**supermac** · 28-04-2009, 09:52

non l'ho in linea, ti metto il codice di tutta la pagina così lo puoi salvare in un file htm e provarlo in locale

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
tbody td {
  border: 1px 0 0 1px solid black;
}
tbody th {
  border: 1px 0 0 0 solid black;
}
thead th {
  border: 0 0 0 1px solid black;
}
thead th .nobordi {
  border: 0;
}
</style>
</head>
<body>
<table>
  <caption>titolo</caption>
  <thead>
    <tr>
      <th class="nobordi">codice</th>
      <th>diametro [mm]
diameter [mm]</th>
      <th>1 rocch. = mtl
1 roll = mtl</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>TOU200</th>
      <td>2,00</td>
      <td>850</td>
    </tr>
    </tr>
      <th>TOU200</th>
      <td>2,00</td>
      <td>850</td>
    </tr>
    </tr>
      <th>TOU200</th>
      <td>2,00</td>
      <td>850</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Discussione: bordi tabella come tris

Strumenti discussione

Ricerca discussione

Visualizza

bordi tabella come tris

Permessi di invio