避免<colgroup>/<col> HTML標籤改變<thead>和<tfoot>行？

有沒有辦法限制或限制HTML標籤中定義的樣式的「操作」字段。避免<colgroup>/<col> HTML標籤改變<thead>和<tfoot>行？

如下表：

<table> 
    <colgroup> 
     <col align="center" /> 
     <col align="center" style="background-color: lightgrey;" /> 
     <col align="center" /> 
    </colgroup> 
    <thead> 
     <tr> 
      <th>Column A</th> 
      <th>Column B</th> 
      <th>Column C</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1.a</td> 
      <td>1.b</td> 
      <td>1.c</td> 
     </tr> 
     <tr> 
      <td>2.a</td> 
      <td>2.b</td> 
      <td>2.c</td> 
     </tr> 
    </tbody> 
</table>

我想background-color: lightgrey;不被施加到「列B」小區（第二th在thead）。

來源

2012-04-30 CDuv

您可以隨時將樣式應用於該單元格，或者爲整個標題行設置整個<tr>的樣式。

http://jsfiddle.net/QQ7LJ/

<tr style="background-color:white;"> 
     <th>Column A</th> 
     <th>Column B</th> 
     <th>Column C</th> 
</tr>

簡稱：沒有，沒有辦法爲「限制」的CSS，它會匹配一切可以利用的目標和你的造型將<col>整列相匹配。爲了得到不同的樣式，你需要以某種方式覆蓋它，最簡單的方法是明確地設計不符合一般風格的樣式。

編輯，您還可以在樣式表塊中執行此操作，方法是使用CSS3選擇器:nth-of-type並將選擇器作用於<tbody>元素。

http://jsfiddle.net/QQ7LJ/1/

tbody td:nth-of-type(2) { 
background-color: lightgrey; 
}

和改變你的HTML（其他都是一樣的）

<colgroup> 
    <col align="center" /> 
    <col align="center"/> 
    <col align="center" /> 
</colgroup>

來源

2012-04-30 13:03:39

我希望有一種方法來限制''但感謝您的回答。覆蓋'background-color' CSS指令的問題是，在''上將其設置爲'transparent'在最終的渲染中沒有區別，因爲''似乎就在''的下面。 – CDuv

'：nth-type-type'確實是一個很好的實用解決方案（至少在我的情況下）。 – CDuv

您應該爲不規則標題使用colgroup。這是一個不規則的標題？你有一個3列的colgroup，然後每個tbody tr是3 td的。這是正常的。有關不規則標題的表格示例，請參閱：https：//www.w3.org/WAI/tutorials/tables/irregular/。 –

避免<colgroup>/<col> HTML標籤改變<thead>和<tfoot>行？

回答

相關問題