如何在表格的第一个TR中删除TD边框

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>

- kamilf

---

像这样吗？http://jsfiddle.net/azq6xfnr/1/ - DaniP

或者这个 - http://jsfiddle.net/azq6xfnr/4/ - Paulie_D

Answer 1

使用CSS的first-child选择器。这是一个Fiddle示例：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>

- Pugazh

Answer 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 */
}

- SW4

Answer 3

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

- Tomas Turan

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>

- Mike Hopkins