Question

In CSS, you can specify the spacing between table cells using the border-spacing property of a table.

However, this results in uniform spacing between columns and rows, and I am finding more situations where the designs I am using call for gaps between rows, but not columns, or visa versa.

If I have a solid background, I can simulate spacing using borders the same colour as the background colour.

I could also make a div (for example) the first child of every table cell, and using either padding or margins to get the desired results, but that is a lot of extra markup just to accommodate the style.

Given that that the data I am displaying is tabular data, is there a sensible way to achieve this style using tables?

Answer 1

You can specify different spacings for horizontal and vertical edges for border-spacing or related properties. Just specify more than one measurement. e.g.,

border-spacing: 1px 2px;