如何在不使用边框间距和空行的情况下在带有边框的表格行之间添加空格

Posted 2023-05-08

技术标签:

【中文标题】如何在不使用边框间距和空行的情况下在带有边框的表格行之间添加空格【英文标题】：How to add space between table rows with border without using border-spacing and empty rows 【发布时间】：2017-03-29 22:00:57 【问题描述】：

我尝试使用边框间距属性。但是我的表有多行的标题，这些行也受它的影响。我只需要表格正文中的行之间的空格。我尝试使用具有一定高度的空行。但我也使用引导表进行排序和过滤。它也对空行进行排序和过滤，但我没有找到明确的方法来修复它，所以排序或过滤后表格布局会中断。表格行也应该有边框。

在具有此类限制的表行之间创建空间的最佳方法是什么？表结构

<table>
<thead>
 <tr>
  <th>col1</th>
  <th>col2</th>
  <th colspan='2'>col3</th>
 </tr>
 <tr>
  <th colspan='2'></th>
  <th>col31</th>
  <th>col32</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>Abc11</td><td>Abc12</td><td>Abc13</td><td>Abc14</td>
 </tr>
 <tr><td>Abc21</td><td>Abc22</td><td>Abc23</td><td>Abc24</td>
 </tr>
</tbody>
</table>

【问题讨论】：

tr 显示：块；边距底部：5px; 请提供minimal reproducible example @GCyrillus 是的，我试过了。但我不需要表格标题中的行之间的空间，只需要在正文中。 【参考方案1】：

通常<tr> 不应该有样式，特别是如果它不被<td>s 继承，边框和边距是<tr>s 不应该有的示例。

解决问题的最简单方法是在 <td>s 中添加 <div>s 并设置它们的样式，您可以使用以下内容：

html：

<table>
    <tr>
        <td>
            <div>santiago</div>
        </td><td>
            <div>santiago</div>
        </td><td>
            <div>santiago</div>
        </td>
    </tr><tr>
        <td>
            <div>santiago</div>
        </td><td>
            <div>santiago</div>
        </td><td>
            <div>santiago</div>
        </td>
    </tr>
</table>

CSS：

table 
    /* to eliminate the default spacing between TDs*/
    border-collapse: collapse; 

td 
    /* let the divs do the spacing */
    padding: 0;

td div 
    border-style: solid;
    border-color: black;
    border-width: 1px 0;
    /* now, here you can add the margin */
    margin-bottom: 10px;
    /* just some nice padding, you don't really need this */
    padding: 10px;

td:first-child div 
    /* just side borders on first and last elements */
    border-left-width: 1px;

td:last-child div 
    /* just side borders on first and last elements */
    border-right-width: 1px;

小提琴：https://jsfiddle.net/dow267ec/

更新：如果内容的高度不同，并且您无法为所有 div 添加固定高度，您可以在表格旁边添加这个简单的 js，应该没问题。同样，我仍然推荐列（请参阅 zurb 基础）方法，但有时您必须使这些表正常工作。

document.querySelectorAll("table tr").forEach(function(tr)
    var max = 0, divs = tr.querySelectorAll("td > div");
    divs.forEach(function(div) max = Math.max(div.offsetHeight, max); );
    // 10 is the padding that we had.
    divs.forEach(function(div) div.style.height = (max - (2 * 10)) + "px"; );
);

这是启用此 js 的更新小提琴。您可以在表中添加 id 以避免碰到其他表。

更新小提琴：https://jsfiddle.net/dow267ec/2/

【讨论】：

此方法有一些变化，例如，如果您不需要 TR 下方的边距，则可以去掉 div 并设置 td 样式。如果即使内容量不同，您也需要所有 div 的高度相同，则需要一些额外的绝对位置技巧。另外，请记住，您还可以使用具有列系统的 Foundation 或 Bootstrap 等框架，您可以完全摆脱表的限制。 @santiago-aritzi 看起来这是我的最佳方式。但是单元格的内容大小差异很大。 Div 有不同的大小，并且是断行结构。您可以使用我粘贴在答案中的那个小脚本。它不需要jquery，但如果你愿意，你可以使用jquery，它会更简洁。此外，填充在那里是硬编码的，您可能也想动态查询填充，或者从 css 中完全删除该填充【参考方案2】：

我认为这是做到这一点的方法。我不确定这是否是您要解释的。

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, th, td 
                border: 1px solid black;
                border-collapse: collapse;
            
            th, td 
                padding: 5px;
                text-align: left;
            
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th rowspan="2">Col1</th>
                <th rowspan="2">Col2</th>
                <th colspan="3">Col6</th>
                <th rowspan="2">Col7</th>
            </tr>
            <tr>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>
            <tr>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td>Row 1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td>Row 2</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

【讨论】：

请阅读第二点。我使用 Bootstrap-table 进行排序和过滤。它还对空行进行排序（我不知道如何改变这种行为）。它打破了表格布局。【参考方案3】：

您可以使用伪来绘制边框和渐变来最终为tbody td 绘制background-color。

css cmets中的基本解释

table 
  border-spacing:0;
  margin:1em;

th 
  padding:1em;
  width:50px;
  background:linear-gradient(to top, gray  , lightgray);

th , td:after/* pseudo */
  border:1px solid;

td 
  text-align:center;
  background:linear-gradient(to bottom, transparent 1em, gray 1em, lightgray);/* drawn at 1em from top till bottom */
  position:relative;/* for the pseudo */
  padding:2em  1em 1em /* 1em on top will be needed here for the demo gap */

td:after /* here comes the border leaving 1em gap in between trs */
  content:'';
  position:absolute;
  /* size it via coordonates */
  left:0;
  right:0;
  top:1em;/* leaves a gap of 1em at the top, do not forget to clear this space within the td with appropriate padding */
  bottom:0;

/* test if cols break */
td:last-of-type 
  width:70px;

td[class] 
  width:100px;

em font-weight:bold;text-decoration:underline;font-variant:small-caps

<table>
  <thead>
    <tr>
      <th rowspan="2">Col1</th>
      <th rowspan="2">Col2</th>
      <th colspan="3">Col6</th>
      <th rowspan="2">Col7</th>
    </tr>
    <tr>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td class>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>
<p> <em>disclaimer: </em> Note this does not involved <code>td</code> spanning through rows or columns !</p>

玩：http://codepen.io/gc-nomade/pen/dOppGJ

【讨论】：

以上是关于如何在不使用边框间距和空行的情况下在带有边框的表格行之间添加空格的主要内容，如果未能解决你的问题，请参考以下文章

如何在不使用溢出隐藏的情况下将边框添加到与边框半径完美匹配的表格列

带有自定义边框的表格

如何在不更改边框的情况下进行css更改以显示所有表格内容？

如何删除表格中的边框间距

Css中控制table单元格的间距

html表格单元格间距设不了是为啥