Table 行无边框（包括最左边和最右边）

Question

我想要 table 中的特定行完全无边界。（这个想法是为大型集合添加一个符号 "gap" 并继续更深层次的数据）。

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

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

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

    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

我认为我没有正确理解您的问题，但希望这能让您入门。

实际上您可以将左右边框设置为透明。他们会占用 space 这听起来像你想要的？

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

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 2

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 3

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

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

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>

Answer 4

您只需要在 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>

Table 行无边框（包括最左边和最右边）

Table row without borders (including leftmost and rightmost)

html

css

html-table

border

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

2。使用 CSS 转换