Is it possible to simulate spacing between table cells such that vertical and horizontal spacing are different?

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;

Answer 2

In the general case where you may specify calues thayt may be applied globally or individually on a property (for example, "padding"), follow a simple pattern.

• If you specify a single value (e.g. padding:2px; ) the value is applied to the top, bottom, left and right of the object.

• If you specify two values (e.g. padding:2px 7px; ) the first value is applied to the top and bottom and the second to the left and right.

• If you specify three values, the first value is applied to the top, the second value to the left and right, and the final value to the bottom.

• If you specify four values (e.g. padding:1px,2px,3px,4px; ) the values are applied to top, right, bottom, left in that order (remember the order using the word TRouBLe).