HTML：表格左邊框，第一欄隱藏

Question

我有一個有趣的問題，即在表格的第一列不display:none td向表添加邊框（ display:none ）。 我只是不能只選擇可見的添加border:none;單元格border:none; 使用border-left向第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) （ 參考 ）

像這樣：

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

這是更新的小提琴

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>