无边框的表格行（包括最左边和最右边）

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>

Answer 2

我认为我没有正确理解您的问题，但希望这可以帮助您入门。

您实际上可以将左右边框设置为透明。它们会占用您想要的空间吗？

请务必注意，单元格周围的每个单独边框实际上都是梯形，因此您将在每个单元格的交点处有形状有趣的三角形，随着边框的增加，这些三角形变得越来越明显。

table, tr, td {
  border: 2px solid black;
  border-collapse: collapse;
}
tr, td {
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}

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

Answer 3

您只需要在td 上设置边框。

td {
  border: 2px solid black;
}

table {
  border-collapse:collapse;
}

.empty_row {
  border: 0;
  text-align:center;
}

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

Answer 4

1。删除完整的表格边框。仅对单元格应用边框

您可以取消整个表格的边框，并将其仅放在单个单元格上。允许您打开/关闭特定单元格。

table {
  border-collapse: collapse; /* keep border-collapse for table */
}
tr, td {
  border: 2px solid black; /* border applied exclusivly to cells, not whole table */
}
.empty_row {
  border: 0;  /* any cell with this class will have borders removed */
}

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

2。使用 CSS 转换

或者使用transform: scaleX()，你可以将你的单元格稍微拉伸到你的边界之外。

table, tr, td {
  border: 2px solid black;
  border-collapse: collapse;
}
.empty_row {
  background-color: #fff; /* must set background or border shows through */
  transform: scaleX( 1.01 ); /* stretch cell slightly over border. */
}

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