All geek questions in one place

Is it possible to simulate the spacing between table cells, so that the vertical and horizontal distances are different?

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

However, this leads to an even distance between columns and rows, and I find more situations where the projects I use require gaps between rows, but not columns, or vice versa.

If I have a solid background, I can simulate the interval using borders of the same color as the background color.

I could also make div (for example) the first child of each table cell and use either padding or fields to get the desired results, but this is a lot of extra markup to fit the style.

Given that the data displayed is tabular, is there a reasonable way to achieve this style using tables?

+3
source share
2 answers

You can specify different distances for horizontal and vertical edges for border-spacingor related properties. Just specify a few dimensions. eg.

border-spacing: 1px 2px;
+10
source

In the general case , where you can specify calues ​​thayt, you can apply it globally or individually by property (for example, "indentation"), follow a simple pattern.

  • If you specify one value (for example, padding: 2px;), the value applies to the top, bottom, left and right of the object.

  • (, padding: 2px 7px; ) - .

  • , , , .

  • (, : 1px, 2px, 3px, 4px; ) , , , ( , TRouBLe).

+6

Source: https://habr.com/ru/post/1698960/

More articles:


All Articles