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

时间:2017-06-16 15:29:11

标签: html css

我有一个有趣的问题是在第一列td隐身(display:none)中添加边框。 我无法仅使用border:none;方选择first-child添加border-left的可见单元格。将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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

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

像这样:

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

这是更新的fiddle

答案 1 :(得分:0)

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

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

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

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

结果如下:

enter image description here

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>