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

Question

1. 我尝试使用 border-spacing 属性。但是我的表有包含多行的标题，这些行也受它影响。我只需要在表体中的行之间有空格。
2. 我尝试使用具有一定高度的空行。但我也使用 bootstrap-table 进行排序和过滤。它也对空行进行排序和过滤，但我没有找到解决它的明确方法，因此表格布局在排序或过滤后中断。
3. 表格行也应该有边框。

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

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

Answer 1

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

解决问题的最简单方法是添加 <div>在 <td> 里面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;
}

fiddle :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 的更新 fiddle 。您可以向表中添加一个 id，以避免碰到其他表。

更新 fiddle :https://jsfiddle.net/dow267ec/2/