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

时间:2014-12-23 13:09:19

标签: css html-table border

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

4 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分: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 */
}

答案 2 :(得分:2)

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

答案 3 :(得分:1)

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