如何爲表頭和表體分開邊框單元格間距

這裏，表格頭和表體中的列/單元格之間沒有間隙。我需要在表格中的列之間有空格，但是表格中的列之間不應有空格。如何爲表頭和表體分開邊框單元格間距

如何在thead中單獨包含列間空格。即邊界空間？

下面是我試過的代碼。

table.OrderDetail { 
 
    font-family: Arial; 
 
    border-collapse: collapse; 
 
} 
 
.OrderDetail tbody { 
 
    padding: 10px; 
 
    text-align: left; 
 
    font-size:13px; 
 
    font-family: Arial; 
 
} 
 
.OrderDetail thead { 
 
    padding: 7px; 
 
    text-align: left; 
 
    background-color: #E0E0E0; 
 
    color:#989898; 
 
    font-size:10px; 
 
} 
 
.OrderNumber { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    background-color: #99CCFF; 
 
    text-align: left; 
 
} 
 
.OrderNumber thead { 
 
    font-size:10px; 
 
} 
 
.OrderNumber tbody { 
 
    font-size:15px; 
 
} 
 
tr.separating_line td { 
 
    border-bottom: 1px solid gray; /* set border style for separated rows */ 
 
} 
 
.OrderDetail td { 
 
    padding: 10px 0; /* 10px top & bottom padding, 0px left & right */ 
 
} 
 
.OrderDetail th { 
 
    padding: 5px 0; /* 10px top & bottom padding, 0px left & right */ 
 
}

<table class="OrderNumber" style="width:100%"> 
 
    <thead> 
 
     <tr></tr> 
 
     <tr> 
 
      <td>Order Number</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>234456667</td> 
 
     </tr> 
 
     <tr></tr> 
 
    </tbody> 
 
</table> 
 
<br></br> 
 
<table class="OrderDetail" style="width:100%"> 
 
    <thead> 
 
     <tr> 
 
      <th>Line Item Number</th> 
 
      <th>Item Description</th> 
 
      <th>Ship To Location</th> 
 
      <th>Carrier</th> 
 
      <th>Tracking Number</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="separating_line"> 
 
      <td>1</td> 
 
      <td>$itemDescription</td> 
 
      <td>$shipToLocation</td> 
 
      <td>$carrier</td> 
 
      <td style="color:#33CCFF">$trackingNumber</td> 
 
     </tr> 
 
     <tr class="separating_line"> 
 
      <td>1</td> 
 
      <td>$itemDescription</td> 
 
      <td>$shipToLocation</td> 
 
      <td>$carrier</td> 
 
      <td style="color:#33CCFF">$trackingNumber</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

我用邊界崩潰：崩潰的表。這使得所有邊框連續。我需要它在身體連續而不是在桌子的頭部連續。它甚至有可能嗎？

來源

2015-07-21 user1364861

你能告訴你的HTML？ –

我覺得我的問題很難領先，我爲此感到抱歉。我的意思是列分隔I.e邊界。我需要在邊界的空白，但應該沒有空間。我已經在表格中使用邊框摺疊來使邊框連續。我希望它能在tbody水平上持續下去，但不會在tad上。 – user1364861

也許這對你有幫助嗎？設置第th個單元格的邊框寬度。它會在標題之間分開，我想這就是你要求的...？

.OrderDetail th { 
    padding: 5px 0; /* 10px top & bottom padding, 0px left & right */ 
    border-right: 5px solid white; 
} 
.OrderDetail th:last-child { 
    border-right: 0; 
}

jsfiddle

來源

2015-07-21 18:48:59

這可能是你在追求什麼。你需要直接定位細胞。

.OrderDetail thead th { padding: 7px; } 
.OrderDetail tbody td { padding: 3px; }

來源

2015-07-21 17:57:27 ded

我覺得我的問題很少有人領導，我爲此感到抱歉。我的意思是列分隔I.e邊界。我需要在邊界的空白，但應該沒有空間。我已經在表格中使用邊框摺疊來使邊框連續。我希望它能在tbody水平上持續下去，但不會在tad上。 – user1364861

如何爲表頭和表體分開邊框單元格間距

回答

相關問題