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

Posted 2023-03-05

【中文标题】无边框的表格行（包括最左边和最右边）

【英文标题】：Table row without borders (including leftmost and rightmost)

【发布时间】：2018-01-13 12:00:05

【问题描述】：

我希望表格中的特定行完全无边界。 （这个想法是为大型集合添加一个象征性的“差距”并继续使用更深层次的数据）。

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

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

如果我将表格设置为无边框，则边框折叠无效。 （注意：此说法不正确，我将其保留，因为它在原帖中）

    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>

有什么想法吗？

【问题讨论】：

感谢大家的好评。当我说“如果我设置没有边框的表格那么边框折叠无效”时我错了。我的错，当我尝试它时，我还删除了表格的边框折叠属性。

【参考方案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>

【讨论】：

是的，但这里我没有边框折叠

给你兄弟

嗯，是的，它有效，抱歉。在测试它时，我还使桌子上的边框折叠无效。

??只是注意到你的答案变成了我的 sn-p 的精确副本....

【参考方案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>

【参考方案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>

【参考方案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>