如何为表头和表体设置单独的边框单元格间距答案

【问题标题】：How to have separate border cellspacing for table head and table body如何为表头和表体设置单独的边框单元格间距
【发布时间】：2015-07-22 02:48:59
【问题描述】：

在这里，表格标题和表格正文中的列/单元格之间没有间隙。我需要表头中的列之间的空间，但表体中的列之间应该没有间隙。

如何在 thead 中单独包含列之间的空格。即边界空间？

以下是我尝试过的代码。

jsfiddle

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>

我使用了border-collapse:collapse at table。这使得所有边界连续。我需要它在身体上是连续的，而不是在桌子的头部是连续的。有可能吗？

【问题讨论】：

你能展示你的html吗？
我认为我的问题有点误导，我很抱歉。我的意思是列分隔即边界。我需要在 thead 的边界上有间隙，但在 tbody 中应该没有空间。我在表格中使用了边框折叠，使边框连续。我希望它在 tbody 级别是连续的，但不是在 thead 上。

标签： html css

【解决方案1】：

也许这会对你有所帮助？设置第 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

【讨论】：

【解决方案2】：

这可能就是您所追求的。您需要直接定位单元格。

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

【讨论】：

我认为我的问题有点误导，我很抱歉。我的意思是列分隔即边界。我需要在 thead 的边界上有间隙，但在 tbody 中应该没有空间。我在表格中使用了边框折叠，使边框连续。我希望它在 tbody 水平上是连续的，但不是在头上。