如何仅在 TABLE 中的第一个 TR 中删除 TD 边界答案

【问题标题】：How to remove TD borders in only first TR in TABLE如何仅在 TABLE 中的第一个 TR 中删除 TD 边界
【发布时间】：2015-02-21 15:17:55
【问题描述】：

我正在为我的网站设计表格。我想要一张桌子，其中第一个 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>

【问题讨论】：

喜欢这个？ jsfiddle.net/azq6xfnr/1
或者这个 - jsfiddle.net/azq6xfnr/4

标签： css html-table border

【解决方案1】：

使用 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>

【讨论】：

【解决方案2】：

我认为 css 伪类 :first-child 可以帮助你：http://www.w3schools.com/cssref/sel_firstchild.asp

【讨论】：

【解决方案3】：

您需要从表格和.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 */
}

【讨论】：

【解决方案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>

【讨论】：