Question

简介：我需要显示如下表格：

table with different spacing between head and body

必要性：

语义HTML编码
无脚本

HTML：

<table>
<thead>
    <tr>
        <th colspan=2>
            One
        </th>
        <th colspan=2>
            Two
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            One
        </td>
        <td>
            Two
        </td>
        <td>
            Three
        </td>
        <td>
            Four
        </td>
    </tr>
    <tr>
        <td>
            One
        </td>
        <td>
            Two
        </td>
        <td>
            Three
        </td>
        <td>
            Four
        </td>
    </tr>
<tbody>
</table>

首次尝试：

“border-collapse属性”

我在border-collapse: separate;和thead border-collapse: collapse;上尝试了tbody，但这根本行不通。

table {
    border-collapse: collapse;
    border-spacing: 1em;
}

table thead {
    border-collapse: separate;
}

table tbody tr {
    border-bottom: 1px solid black;
}

table thead tr th{
    border-bottom: 1px solid black;
    padding: 10px;
    text-align: center;
}

table tbody tr td {
    border-bottom: 1px solid black;
    padding: 10px;
}

On JSFIDDLE

第二次尝试：

“添加空白单元格”

我可以通过在HTML代码中添加空白单元格来获得表格的首选外观。但这种方法缺乏语义结构。

table {
    border-collapse: collapse;
    border-spacing: 1em;
}

table tbody tr {
    border-bottom: 1px solid black;
}

table thead tr th[colspan="2"]{
    border-bottom: 1px solid black;
    padding: 10px;
    text-align: center;
}

table tbody tr td {
    border-bottom: 1px solid black;
    padding: 10px;
}

On JSFIDDLE

其他各种尝试

我还在标题边框上尝试-webkit-border-image: -webkit-linear-gradient(left, black 95%, white 5%);，但无法让它正常工作。

毕竟我对新建议持开放态度。

注意： 这将是一个电子书文件。因此，一般背景颜色可能因读者应用程序而异。

Answer 1

Here's my try

基本上我刚刚做了：

table thead tr th[colspan="2"]:first-child {
    border-right: 20px solid white;
}
table thead tr th[colspan="2"]:nth-child(2) {
    border-left: 20px solid white;
}

注意：我个人不会使用这种复杂的选择器，但这应该会给你一个想法。

Answer 2

根据您的兼容性要求，您可以选择使用CSS generated-content：

th {
    /* other CSS */
    position: relative;
}

thead th::before,
thead th::after {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 0.5em;
    border-bottom: 1px solid #fff;
}

thead th::before {
    left: 0;
}

thead th::after {
    right: 0;
}

JS Fiddle demo

为了简单起见，我已经将两个 th元素设为相同的::before和::after，但是如果总共只有两个th可以更改选择器的元素：

th {
    /* other CSS */
    position: relative;
}

thead th:first-child::after,
thead th:last-child::before {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 0.5em;
    border-bottom: 1px solid #fff;
}

thead th:last-child::before {
    left: 0;
}

thead th:first-child::after {
    right: 0;
}

JS Fiddle demo

Answer 3

您可以通过添加白色边框来完成此操作。然后，您需要将它们从第一个和最后一个单元格中关闭。

table thead tr th{
    border-left: solid 10px white;
    border-right: solid 10px white;
    border-bottom: 1px solid black;
    padding: 10px;
    text-align: center;
}
table thead tr th:first-child {
    border-left: none;
}
table thead tr th:last-child {
    border-right: none;
}

这是一个更新的js小提琴http://jsfiddle.net/davetayls/Tw5Vb/9/

不同行的不同边框间距

3 个答案: