我正在为我的网站设置样式表。我希望有一张桌子,其中第一个TR没有边框,而其他TR和它们的TD有边框。 代码:http://jsfiddle.net/azq6xfnr/或此处:
.table2 {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
.table2 .header {
background-color: #d8ff93;
color: #126f06;
border: 0;
}
.table2 td {
border: 1px solid #53f673;
padding: 10px;
}
.table2 tr:not(.header):nth-child(odd) {
background-color: #3cde53;
}
<table class="table2">
<tr class="header"><td>Lp.</td><td>Column 1</td><td>Column 2</td></tr>
<tr><td>1</td><td>Row 1</td><td>Row 1</td></tr>
<tr><td>2</td><td>Row 2</td><td>Row 2</td></tr>
<tr><td>3</td><td>Row 3</td><td>Row 3</td></tr>
<tr><td>4</td><td>Row 4</td><td>Row 4</td></tr>
<tr><td>5</td><td>Row 5</td><td>Row 5</td></tr>
</table>
答案 0 :(得分:3)
使用CSS first-child
选择器。这是一个小提琴http://jsfiddle.net/r8p061hs/或http://jsfiddle.net/r8p061hs/1/
答案 1 :(得分:2)
您需要从表格和.header
行中的单元格中删除边框,无需使用:first-child
或:first-of-type
,因为您已获得该行班级header
.table2 {
border-collapse: collapse;
border-spacing:0;
text-align: center;
/* remove the border from here */
}
.table2 .header td{
border:none; /* and from here */
}
答案 2 :(得分:2)
我认为css伪类:第一个孩子可以帮助你:http://www.w3schools.com/cssref/sel_firstchild.asp
答案 3 :(得分:1)
作为其他答案的替代方法,如果您的意图是将第一行设置为标题行,您还可以考虑使用带有<thead>
元素的更多语义<th>
分组,如果这是实际的。然后你可以对它们进行分类(可取)或仅仅依赖于标签名称(由于选择器性能不太可取,但仍然可行)。
然后对<tbody>
中的后续行进行分组,您还可以简化备用行着色选择器,因为您可以避免使用:not
伪选择器。
调整后的代码示例:
<table class="table2">
<thead class="header">
<tr><th>Lp.</th><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Row 1</td><td>Row 1</td></tr>
<tr><td>2</td><td>Row 2</td><td>Row 2</td></tr>
<tr><td>3</td><td>Row 3</td><td>Row 3</td></tr>
<tr><td>4</td><td>Row 4</td><td>Row 4</td></tr>
<tr><td>5</td><td>Row 5</td><td>Row 5</td></tr>
</tbody>
</table>