如何在不使用邊框間距和空行的情況下在帶有邊框的表格行之間添加空格

我試圖使用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

來源

2016-11-15 Eugene

TR {顯示：塊; margin-bottom：5px;} –

請提供[mcve] –

@GCyrillus是的，我試過了。但是我不需要表頭中的行之間的空間，只在體內。 – Eugene

通常<tr>應該沒有造型，特別是如果它不是由<td> S，邊框繼承和利潤率是什麼<tr>不是應該有一個例子。

您的問題，最簡單的方法是添加<div> S中<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你旁邊的桌子，你應該罰款。同樣，我仍然recommendt列（見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/

來源

2016-11-15 21:49:43

這個方法有一些變化，例如，如果你不需要TRs下邊的空白，你可以去掉div並改變tds的樣式。如果你需要所有的div都是相同的高度，即使有不同數量的內容，你也需要一些額外的絕對位置欺騙。另外，請記住，您也可以使用具有列系統的Foundation或Bootstrap之類的框架，並且可以完全擺脫表限制。 –

@ santiago-aritzi看起來這是對我來說最好的方法。但單元格在內容大小上有很大差異。 Div's有不同的尺寸，並且是斷行結構。 – Eugene

您可以使用我在答案中粘貼的那個小腳本。它不需要jQuery，但如果你想要的話，你可以使用jQuery，它會更簡潔。此外，填充是在那裏硬編碼的，你可能想要或者在飛行中查詢填充，或者從CSS中完全刪除填充 –

我覺得這是做它的方式。我不確定這是你想要解釋的。

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

來源

2016-11-15 21:45:22

請閱讀第二點。我使用Bootstrap-table進行排序和篩選。它也排序空行（我不知道如何改變這種行爲）。這是休息桌布局。 – Eugene

你可以使用一個僞繪製邊框和梯度，最終得出一個對background-colortbody td。

在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

來源

2016-11-16 02:02:33

如何在不使用邊框間距和空行的情況下在帶有邊框的表格行之間添加空格

回答

相關問題