如何仅在 TABLE 中的第一个 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>

Answer 1

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