html - 不同行的不同边框间距

Question

概要：我需要显示如下表：

必需品：

• 语义 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: 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;
}​

在 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;
}​

在 JSFIDDLE 上

---

其他各种尝试

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

---

毕竟我愿意接受新的建议。

注意： 这将在电子书文件中。因此，一般背景颜色在不同的阅读器应用程序中可能会有所不同。

Answer 1

这是我的尝试。

基本上我只是做了：

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 生成内容：

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 小提琴演示。

为了简单起见，我将两个 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 小提琴演示。

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 fiddle http://jsfiddle.net/davetayls/Tw5Vb/9/