HTML:隐藏第一列的表格左边框

Question

我有一个有趣的问题，即在第一列 td 不可见 (display:none) 的情况下向表格添加边框。 我根本无法仅选择可见的单元格以使用 border-left 侧将 border:none; 添加到 first-child。将 hidden 添加到行的第一个子项也不起作用。

    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;
    }

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

Answer 1

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

像这样:

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

这是更新的 fiddle