utilizzando Centro text-align in colgroup

Question

Ho una tabella nella mia pagina, io uso colgroups per formattare tutte le celle in questa colonna allo stesso modo, funziona bene per colore di sfondo e tutti. ma non riesco a capire perché il centro di allineamento del testo non funziona. non allinea il testo al centro.

esempio:

<table id="myTable" cellspacing="5"> 
    <colgroup id="names"></colgroup> 
    <colgroup id="col20" class="datacol"></colgroup> 
    <colgroup id="col19" class="datacol"></colgroup> 
    <colgroup id="col18" class="datacol"></colgroup> 

    <thead> 
     <th>&nbsp;</th> 
     <th>20</th> 
     <th>19</th> 
     <th>18</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
    </tbody> 
</table> 

CSS:

#names { 
    width: 200px; 
} 

#myTable .datacol { 
    text-align: center; 
    background-color: red; 
} 

Answer 1

Solo a limited set of CSS properties applies to columns, e text-align non è uno di loro.

Vedi "The mystery of why only four properties apply to table columns" per una descrizione del motivo per cui questo è il caso.

Nel vostro semplice esempio, il modo più semplice per risolvere il problema sarebbe quello di aggiungere queste regole:

#myTable tbody td { text-align: center } 
#myTable tbody td:first-child { text-align: left } 

Che sarebbe centrare tutte le celle della tabella, ad eccezione della prima colonna. Questo non funziona in IE6, ma in IE6 lo text-alignfa effettivamente (erroneamente) funziona sulla colonna. Non so se IE6 supporti tutte le proprietà o solo un sottoinsieme più grande.

Oh, e il codice HTML non è valido. <thead> manca un <tr>.

Answer 2

Vedi domanda simile: Why is styling table columns not allowed?

È consentito soltanto per impostare confine, sfondo, larghezza e visibilità proprietà, a causa del fatto che le cellule non sono discendenti diretti di colonne, solo di righe.

Ci sono alcune soluzioni. Il più semplice è aggiungere una classe a ogni cella nella colonna. Sfortunatamente ciò significa più HTML ma non dovrebbe essere un problema se stai generando tabelle da un database ecc.

Un'altra soluzione per i browser moderni (ad esempio non IE6) è l'uso di alcune pseudo classi. tr > td:first-child selezionerà la prima cella di una riga. Opera, Safari, Chrome e Firefox 3.5 supportano anche il selettore :nth-child(n) in modo da poter scegliere come target colonne specifiche.

Si potrebbe anche usare td+td per selezionare dalla seconda colonna in poi (in realtà significa "selezionare tutti td gli elementi che hanno un td elemento alla sua sinistra) td+td+td seleziona dalla terza colonna -. È possibile continuare in questo modo, sovrascrivendo Onestamente, non è un gran bel codice

Answer 3

Con il seguente CSS, è possibile aggiungere una o più classi all'elemento della tabella per allineare le sue colonne di conseguenza.

CSS

.col1-right td:nth-child(1) {text-align: right} 
.col2-right td:nth-child(2) {text-align: right} 
.col3-right td:nth-child(3) {text-align: right} 

HTML

<table class="col2-right col3-right"> 
    <tr> 
    <td>Column 1 will be left</td> 
    <td>Column 2 will be right</td> 
    <td>Column 2 will be right</td> 
    </tr> 
</table> 

Esempio: http://jsfiddle.net/HHZsw/

Answer 4

In aggiunta alle limitazioni di cui in altre risposte, a partire dal febbraio 2018, la visibilità: crollo ancora non funziona su colgroup in browser basati su Chrome e Chromium, a causa di un bug. Vedi "CSS col visibility:collapse does not work on Chrome". Quindi credo che le proprietà attualmente utilizzabili siano solo il bordo, lo sfondo, la larghezza (a meno che non si utilizzi una sorta di polyfill per Chrome e altri browser basati su Chromium). Il bug può essere rintracciato allo https://crbug.com/174167.