Question

Synopsis: I need to display a table like the one below:

Necessities:

• Semantic HTML coding
• No scripting

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>

---

First attempt:

“border-collapse attribute”

I tried border-collapse: separate; on thead and border-collapse: collapse; on tbody but that simply didn’t work.

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

---

Second Attempt:

“Adding blank cells”

I can get the preferred look of the table by adding blank cells in HTML code. But this approach defects semantic structure.

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

---

Other various attemps

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

Depending on your compatibility requirements, you have the option of using 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.

For the sake of simplicity I’ve given both th elements the same ::before and ::after, however if there’s always only two th elements the selectors can be changed:

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.