表格样式 - 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类..如何？

回答

相关问题