表格樣式 - col類應該覆蓋td類..如何？

我已經設置了第一列紅色背景展現出來。

但是，奇數/偶數樣式正在壓倒它。即使添加！重要的;

有什麼辦法可以讓這個問題得到解決嗎？（而不必類添加到

tr.row_odd td { 
    background:#efefef; 
} 
tr.row_even td { 
    background:green; 
} 
.col1 { background:red !important; } 

<table> 
<col class="col1"></col> 
<tr class="row_odd"><td>test</td><td>test</td></tr> 
<tr class="row_even"><td>test</td><td>test</td></tr> 
</table>

感謝，韋斯利

來源

2011-11-24 Wesley

從HTML <col>的類未被繼承<td>。你需要使用HTML。在錶行提供一流col1先<td>

http://jsfiddle.net/uqJHf/6/

<table> 
    <colgroup> 
     <col class="col1" /> 
     <col /> 
    </colgroup> 
    <tbody> 
     <tr class="row_odd"> 
      <td class="col1">test</td> 
      <td>test</td> 
     </tr> 
     <tr class="row_even"> 
      <td class="col1">test</td> 
      <td>test</td> 
     </tr> 
    </tbody> 
</table>

來源

2011-11-24 13:23:02 HerrSerker

該解決方案的問題在於表格通常是動態生成的，因此它將成爲基礎「表生成過程」（以及存在標記開銷）向每個單元添加類的設計的根本性變化。在我看來，在CSS優先級規則的設計中存在一個根本的缺陷。應該有一個可用的語法來允許'colgroup'和'col'設置覆蓋'tr'和'td'值。 – cartbeforehorse

您可以嘗試從col標籤中將相關類複製到相應的td和th標籤中，如下所示：http://stackoverflow.com/questions/9623601/how-to-use-class-attribute-in-html -col/9623761＃9623761 – HerrSerker

jQuery只是一個縮寫：「解決CSS/HTML限制的解決方法」;-) – cartbeforehorse

td:first-child 
{ 
    background:red !important; 
}

來源

2011-11-24 12:56:20 Helen

列可以是任意的，不只是第一個。這只是一個例子。不要認爲太多的瀏覽器支持xth-child。 – Wesley

在這種情況下，我不認爲你可以只用CSS來完成，因爲col和colgroup沒有得到很好的支持 - 你可以使用js爲每個特定列中的td標籤添加一個類，但是？ – Helen

首先，讓我們處理的標記。我相信<col>應該是自閉，因爲它不能包含任何文本或子元素，也應該包含在<colgroup>中，甚至可能需要爲每列添加<col>標記（因此4列表示4個<col>的標記）

<table> 
    <colgroup> 
     <col class="col1" /> 
     <col /> 
    </colgroup> 
    <tr class="row_odd"><td>test</td><td>test</td></tr> 
    <tr class="row_even"><td>test</td><td>test</td></tr> 
</table>

現在，已經有了一點關於CSS的玩法，這似乎是CSS如何應用於列和<tr>的。如果您刪除了與<tr>相關的樣式，則會看到樣式正確應用。

因此，從這個我得出結論，風格是應用在一個分層的方法，可能是因爲列是一種表的元細節。一個簡單的想象是，<tr>標籤分層排列在列的頂部上，並且因爲您已經爲<tr>定義了background-color，所以列樣式不顯示 - 由於顏色不透明。如果將<tr>的background-color設置爲RGBA值，則會看到列的顏色「閃耀」。

請與提琴的修飾，示範：http://jsfiddle.net/uqJHf/4/

希望幫助，它肯定幫助了我，因爲我已經在我的調查中學到新的東西在這裏我自己。

編輯：看來IE9不與我說的，它似乎並沒有給RGBA值應用於<tr>如果<col>有background-color組同意。在Firefox 7中工作，但...

來源

2011-11-24 13:22:39 WickyNilliams

表格樣式 - col類應該覆蓋td類..如何？

回答

相關問題