我正在为我的网站设置样式表。我想要一个表格,其中第一个 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>
使用 CSS first-child
选择器。这是一个小提琴 http://jsfiddle.net/r8p061hs/或 http://jsfiddle.net/r8p061hs/1/
.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;
}
.table2 tr:first-child {
border: 1px solid #53f673;
}
.table2 tr:first-child td {
border: none;
}
<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>
我认为css伪类:第一个孩子可以帮助你: http://www.w3schools.com/cssref/sel_firstchild.asp
从表格和.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 */
}
作为其他答案的替代方法,如果您打算以这种方式将第一行设置为标题行,您还可以考虑使用更具语义<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>