html - 表格行无边框(包括最左边和最右边)

Question

我想要表格中的特定行完全无边框。 (这个想法是为大型集合添加一个象征性的“差距”并继续更深层次的数据)。

我找到了将单元格设置为无边框的方法，但该行的表格边框仍然可见。

一个解决方案可能是在下面创建另一个表格，但问题是我会失去列的对齐方式。

如果我将表格设置为无边框，则边框折叠无效。 (注意:这个说法是不正确的，我保留它是因为它在原帖中)

    table, tr, td {
      border: 2px solid black;
      border-collapse: collapse;
    }
    .empty_row{
      border: 0;
    }

    <table>
      <tr>
        <td>AAA</td>
        <td>BBBB</td>
        <td>CCCC</td>
      </tr>
      <tr >
        <td>DDD</td>
        <td>EEE</td>
        <td>FFF</td>
      </tr>
    
      <tr class='empty_row'>
        <td class='empty_row' colspan='3'>..... (this should have no borders at the sides)</td>
      </tr>
    
      <tr>
        <td>GGGGGGGG</td>
        <td>HHH</td>
        <td>III</td>
      </tr>
    </table>

有什么想法吗？

Answer 1

table {
border-collapse:collapse;
}
tr td {
  border: 2px solid black;
}
.empty_row{
  border: 0px;
}

<table>
  <tr>
    <td>AAA</td>
    <td>BBBB</td>
    <td>CCCC</td>
  </tr>
  <tr >
    <td>DDD</td>
    <td>EEE</td>
    <td>FFF</td>
  </tr>

  <tr class='empty_row'>
    <td class='empty_row' colspan='3'>.....</td>
  </tr>

  <tr>
    <td>GGGGGGGG</td>
    <td>HHH</td>
    <td>III</td>
  </tr>
</table>