non si applica classe per le colonne di una tabella
-
27-09-2019 - |
Domanda
La mia comprensione di col è che può essere usato per indicare una classe per tutti gli elementi nella colonna di una tabella. Questo non sembra funzionare per me però. Posso applicare la classe a individuo td di, ma voglio COL di aiutarmi a evitare questo.
Questa è la testa html:
<head>
<style type="text/css">
.slick {
background-color:#b0c4de; /*This always works*/
border-style:solid; /*This doesn't work when only applied to a <col>*/
border-width:5px;
}
</style>
</head>
È interessante notare che il colore di sfondo funziona sempre, ma il confine non riesce qualche volta.
Ecco il corpo HTML:
<body>
<table><tbody>
<colgroup>
<col class="slick" />
<col class="slick" />
</colgroup>
<tr id="r1">
<td><label >Planner/Scheduler/Estimators</label></td>
<td class="slick"><label >2010</label></td>
</tr>
</tbody></table>
</body>
La rimozione dei tag tbody o COLGROUP non sembra avere importanza. Lo sfondo è presente in entrambi gli elementi; il bordo viene applicata solo al secondo elemento, in cui la classe è specificato nel tag td.
Ho avuto la sensazione che non avrebbe funzionato confine con il Col, ma mostra Firebug che lo stile chiazza di petrolio non è applicata alla colonna di sinistra a tutti. Che cosa c'è che non va?
Soluzione
Secondo scuole W3, solo l'attributo width funziona in Firefox. Inoltre non sembra l'attributo border è supportato a tutti.
Altri suggerimenti
Questo perché il CSS 2.1 specifica definisce che il diverso confine proprietà si applicano solo quando si imposta border-collapse: collapse;
sul relativo elemento <table>
.
Inoltre, secondo CSS 2.1 ci sono solo poche proprietà, che può essere usato per colonne di stile (con limitazioni):
- proprietà del bordo (richiede
border-collapse: collapse;
sul relativo<table>
element) - proprietà dello sfondo (si applicano solo se lo sfondo cella e la riga è trasparente)
-
width
-
visibility
(evitacollapse
valore di rendering delle cellule, le cellule che vanno in altre colonne vengono tagliati)
Non è necessario applicare classi per ogni td.
Si può semplicemente lo stile del TD:
td {
background-color:#b0c4de;
border-style:solid;
border-width:5px;
}