用于表格标题的CSS，甚至奇数行？

我的表结构如下所示：用于表格标题的CSS，甚至奇数行？

<table> 
<thead> 
    <tr class="navigation"> 
    </tr> 
</thead> 
<thead> 
    <tr class="headers"> 
    </tr> 
</thead> 
<tbody> 
    <tr class="even"> 
    <td><a href="#"/></td> 
    </tr> 
    <tr class="odd"> 
    </tr> 
    </tr> 
</tbody> 
</table>

我已经定义了下面的CSS，如何申请“导航”，“头”，“偶”，“奇”类在我的CSS？如何定义它们与'table.even'，'table.odd'等'table'类有关？感谢

table{ 
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
    font-size: 10px; 
    #margin: 45px; 
    width:100%; 
    text-align: left; 
    border-collapse: collapse; 
}

来源

2010-01-22 Ashika Umanga Umagiliya

您的HTML中存在一些错误，例如同一个表中的额外''和两个''元素。在你的CSS中还有一个随机＃。我猜这些只是复制粘贴错误。 ;） – 2010-01-22 06:10:37

仅供参考父元素的类或父元素本身，如果你要使用的类名超过一个类型的元素。例如，这样的：

.navigation { font-weight:bold }

...而不是这样的：

tr.navigation { font-weight:bold }

它将当浏览器呈现页面削减加载时间。

参考：Optimize browser rendering [谷歌代码]

来源

2010-01-22 06:08:15 jay

为了未来的可维护性，至少对表格进行分类并使用少许继承是一个好主意，除非你是100％，否则这是一个全球性的类。 – jhogendorn 2010-01-25 05:04:42

应用类的任何元素可以让你做到以下几点：

element.className { rules }

与 TR

所以，你可以做到以下几点：

tr.navigation { font-weight:bold }

所以创建斑马对你的赔率和事件行的条纹可以这样做：

tr.odd { background-color:#FFF; } 
tr.even { background-color:#CCC; }

来源

2010-01-22 06:05:27 Sampson

你会使用

table thead tr.navigation {} 
table thead tr.headers {} 
table tbody tr.even {} 
table tbody tr.odd {}

来源

2010-01-22 06:06:19 jhogendorn

@devians，根据我的回答，这是完全没有效率的。您最好为表格行使用.navigation，并且如果必须在不同的元素上定义不同的样式，请使用不同的类名称。 – jay 2010-01-22 06:13:35

更简单，不需要类：

tbody tr:nth-child(odd) { 
    put your style here... 
} 

tbody tr:nth-child(even) { 
    put your style here... 
}

我希望帮助！

来源

2013-06-12 18:12:56

用于表格标题的CSS，甚至奇数行？

回答

相关问题