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

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, 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。删除全表边框。仅将边框应用于单元格

您可以从整个桌子上取下边框，只将它放在单个单元格上。允许您打开/关闭特定单元格。

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

2。使用CSS转换

或者使用transform: scaleX()，你可以在你的边界上稍微拉伸你的细胞。

＆＃13;

＆＃13;

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. */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您只需在td上设置边框。

＆＃13;

＆＃13;

td {
  border: 2px solid black;
}

table {
  border-collapse:collapse;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

你想要四面八方和柱子之间没有边界吗？ 如果是，请尝试样式边框中的表：0px 它可能会删除你的边框