如何在不使用 border-spacing 和空行的情况下在带边框的 table 行之间添加 space

Question

我尝试使用 border-spacing 属性。但是我的 table 有 header 多行也受它影响。我只需要 table body.
我尝试使用具有一定高度的空行。但我也使用 bootstrap-table 进行排序和过滤。它也对空行进行排序和过滤，但我没有找到解决它的明确方法，因此 table 布局在排序或过滤后中断。
另外 table 行应该有边框。

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

<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

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

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

Answer 2

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

解决您的问题的最简单方法是在 <td> 中添加 <div> 并改用它们的样式，您可以使用类似这样的方法：

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 添加固定高度，您可以在 table 旁边添加这个简单的 js，应该没问题。同样，我仍然推荐列（参见 zurb 基础）方法，但有时您必须使这些 table 起作用。

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。您可以向 table 添加一个 id 以避免命中其他 tables.

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

Answer 3

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

css评论中的基本解释

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

如何在不使用 border-spacing 和空行的情况下在带边框的 table 行之间添加 space

How to add space between table rows with border without using border-spacing and empty rows

html

css

html-table

twitter-bootstrap

bootstrap-table