不同行的不同边框间距

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属性"

我试图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上

---

其他各种尝试

I also tried -webkit-border-image: -webkit-linear-gradient(left, black 95%, white 5%); on headers borders but couldn't manage to get it working.

---

After all I am open to new suggestions.

Note: This is going to be in an eBook file. So general background color may vary in different reader applications.

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

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