Можно ли смоделировать расстояние между ячейками таблицы таким образом, чтобы расстояние по вертикали и горизонтали было разным?

Question

В CSS вы можете указать интервал между ячейками таблицы, используя свойство border-spacing таблицы.

Однако это приводит к равномерному расстоянию между столбцами и строками, и я нахожу все больше ситуаций, когда проекты, которые я использую, требуют промежутков между строками, но не столбцами, или наоборот.

Если у меня сплошной фон, я могу имитировать интервал, используя границы того же цвета, что и цвет фона.

Я мог бы также сделать div (например) первым дочерним элементом каждой ячейки таблицы и использовать либо отступы, либо поля для получения желаемых результатов, но это большая дополнительная разметка только для соответствия стилю.

Учитывая, что данные, которые я отображаю, являются табличными, есть ли разумный способ достичь этого стиля с помощью таблиц?

Answer 1

Вы можете указать разные расстояния для горизонтальных и вертикальных краев для border-spacing или связанных свойств. Просто укажите более одного измерения. например.

border-spacing: 1px 2px;

Answer 2

В общий случай там, где вы можете указать значения, которые могут применяться глобально или индивидуально к свойству (например, "заполнение"), следуйте простому шаблону.

• Если вы укажете одно значение (например,отступ: 2 пикселя;) значение применяется к верхней, нижней, левой и правой части объекта.

• Если вы укажете два значения (например,отступ: 2px 7px;) первое значение применяется к верхнему и нижнему, а второе - к левому и правому.

• Если вы укажете три значения, первое значение будет применено к верхнему, второе значение - к левому и право, и окончательное значение дно.

• Если вы укажете четыре значения (например,отступ: 1px, 2px, 3px, 4px;) значения применяются к верхнему, правому, нижнему, левому в таком порядке (запомните порядок, используя слово TRouBLe).