HTML：表格边框 - 左侧隐藏第一列

Question

我有一个有趣的问题是在第一列td隐身（display:none）中添加边框。 我无法仅使用border:none;方选择first-child添加border-left的可见单元格。将hidden添加到行的第一个子节点也不起作用。

＆＃13;

＆＃13;

    table{
      border-collapse:collapse;
    }
    .a  {
      border:1px solid #f00;
    }
      table .td-hide{
      display:none;
    }
    table tr{
      border-bottom:1px solid #000;
    }
    table td{
      border-left:1px solid #000;
    }
    table td:not([style*="display:none"]):first-child{
      border:0;
    }

＆＃13;

    <div class='a'>
      <table>
        <tr>
          <td class='td-hide'>
          </td>
          <td>name 1</td>
          <td>name 2</td>
        </tr>
        <tr>
          <td class='td-hide'></td>
          <td>name 1</td>
          <td>name 2</td>
        </tr>
       </table>
     </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用:nth-of-type(n)（reference）

像这样：

table td:nth-of-type(2){
  border:0;
}

这是更新的fiddle

Answer 2

此CSS删除了最后一个<tr>的底部边框

table tr:not(:last-child) {
  border-bottom: 1px solid #000;
}

此CSS删除了第一个<td>上的左边框，

table td:not(:last-child) {
  border-right: 1px solid #000;
}

结果如下：

table {
  border-collapse: collapse;
}

.a {
  border: 1px solid #f00;
}

table .td-hide {
  display: none;
}

table tr:not(:last-child) {
  border-bottom: 1px solid #000;
}

table td:not(:last-child) {
  border-right: 1px solid #000;
}

<div class='a'>
  <table>
    <tr>
      <td class='td-hide'>
      </td>
      <td>
        name 1
      </td>
      <td>
        name 2
      </td>
    </tr>
    <tr>
      <td class='td-hide'>
      </td>
      <td>
        name 1
      </td>
      <td>
        name 2
      </td>
    </tr>
    <tr>
      <td class='td-hide'>
      </td>
      <td>
        name 1
      </td>
      <td>
        name 2
      </td>
    </tr>
  </table>
</div>