When it comes to tables, I want to customize the column spacing in a specific way. I need space between columns in the table header but no gaps between columns in the table body.
How can I achieve this by including border space only in the thead section?
Check out the code snippet below that I've been working on:
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>I have applied 'border-collapse: collapse' to the table, which makes all borders continuous. But now, I'm looking for a way to keep the borders continuous at the body level and separate them at the head level of the table. Is this even possible?