Question

我尝试使用border-spacing属性。但我的表有多行的标题，也受其影响。我只需要在表体中的行之间留出空格。
我尝试使用一些高度的空行。但我也使用bootstrap-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>

Rough scheme of the table

Answer 1

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

解决您问题的最简单方法是在<div>内添加<td>并替换它们，您可以使用以下内容：

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 foundation）方法，但有时你必须使这些表工作。

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/

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

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

css评论中的基本解释

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何使用边框在表行之间添加空格而不使用border-spacing和空行

3 个答案: