The question: draw borders between a table’s cells without drawing a border around the table. The answer:
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
}| A | B | C |
|---|---|---|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
border-collapse: collapse switches the table into the collapsed border model, where adjacent borders occupy the same line and CSS must decide which candidate draws. The spec’s conflict-resolution rules rank them—wider beats narrower, some styles beat others—with one absolute case at the top:
Borders with the ‘border-style’ of ‘hidden’ take precedence over all other conflicting borders.
At every point on the perimeter, a cell’s 1px solid collides with the table’s own hidden border, and hidden wins unconditionally. Interior borders never touch the table edge, so they draw normally. Two declarations suppress the entire perimeter.
hidden handles the perimeter through border conflict resolution, without separate selectors for the first and last rows and columns.
This depends on border-collapse: collapse; with separate borders, hidden does not suppress the cells’ outer edges. Browser support was a limitation when I posted it: I tested Firefox 3.6 and Chromium 5.0, and a later edit noted that Internet Explorer did not support the trick.
I created my Stack Overflow account and posted this two minutes later, against a question that had been sitting for almost a year. It became my most-voted answer there. I mostly stopped answering on Stack Overflow and spent the following decade on mailing lists.