Question

我正在为我的网站设置样式表。我希望有一张桌子，其中第一个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>

Answer 1

使用CSS first-child选择器。这是一个小提琴http://jsfiddle.net/r8p061hs/或http://jsfiddle.net/r8p061hs/1/

Answer 2

您需要从表格和.header行中的单元格中删除边框，无需使用:first-child或:first-of-type，因为您已获得该行班级header

Demo Fiddle

.table2 {
    border-collapse: collapse;
    border-spacing:0;
    text-align: center;
    /* remove the border from here */
}
.table2 .header td{
    border:none; /* and from here */
}

Answer 3

我认为css伪类：第一个孩子可以帮助你：http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 4

作为其他答案的替代方法，如果您的意图是将第一行设置为标题行，您还可以考虑使用带有<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>

如何仅在TABLE中的第一个TR中删除TD边框

4 个答案:

Demo Fiddle