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

Question

I tried to use border-spacing attribute. 我尝试使用border-spacing属性。 But my table has header with multiple rows which are also affected by it. 但是我的表的标头包含多行，这些行也受到它的影响。 I need spaces only between rows in table body. 我仅在表主体中的行之间需要空格。
I tried to use empty rows with some height. 我尝试使用一定高度的空行。 But i also use bootstrap-table for sorting and filtering. 但是我也使用bootstrap-table进行排序和过滤。 It sorts and filters empty rows too, and i didn't find clear way to fix it, so table layout breaks after sorting or filtering. 它也可以对空行进行排序和过滤，而我也没有找到解决该问题的清晰方法，因此在进行排序或过滤后表布局会中断。
Also table rows should have border. 表格行也应有边框。

What is the best way to create spaces between table rows with such limitations ? 在具有此类限制的表行之间创建空间的最佳方法是什么？ Table structure 表结构

<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

Normally <tr> should have no styling, specially if it is not to be inherited by <td> s, borders and margins are an example of what <tr> s should not have. 通常， <tr>不应具有样式，尤其是如果它不被<td>继承时，边框和边距是<tr>不应具有的示例。

The easiest approach to your problem is to add <div> s inside the <td> s and style them instead, you can use something like this: 解决问题的最简单方法是在<td>内添加<div>并设置其样式，您可以使用以下方法：

HTML: 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: 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/ 小提琴： https : //jsfiddle.net/dow267ec/

Update: if content is of different heights and you cannot add a fixed height to all the divs, you can add this simple js next to your table and you should be fine. 更新：如果内容具有不同的高度，并且您不能为所有div添加固定高度，则可以在表格旁边添加此简单的js，就可以了。 Again, I still recommend the columns (see zurb foundation) approach, but sometimes you have to make those tables work. 再次，我仍然推荐使用列（请参阅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"; });
});

Here is the updated fiddle with this js enabled. 这是启用了此js的更新的小提琴。 You can add an id to the table to avoid hitting other tables. 您可以向该表添加一个ID，以避免访问其他表。

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

Answer 2

I think this is the way to do it. 我认为这是这样做的方式。 I'm not sure if this is what you're trying to explain. 我不确定这是否是您要解释的内容。

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

you could use a pseudo to draw the borders and a gradient to eventually draw a background-color for tbody td . 您可以使用伪来绘制边框，并使用渐变来最终为tbody td绘制background-color 。

basic explanation in css comments 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>

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

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

问题描述

3 个解决方案

解决方案1
3 已采纳 2016-11-15 21:49:43

解决方案2
2 2016-11-15 21:45:22

解决方案3
0 2016-11-16 02:02:33

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

问题描述

3 个解决方案

解决方案1 3 已采纳 2016-11-15 21:49:43

解决方案2 2 2016-11-15 21:45:22

解决方案3 0 2016-11-16 02:02:33

解决方案1
3 已采纳 2016-11-15 21:49:43

解决方案2
2 2016-11-15 21:45:22

解决方案3
0 2016-11-16 02:02:33