Как добавить пробел между столбцами таблицы

Question

Я пытаюсь отформатировать таблицу так, чтобы между определенными столбцами был пробел с помощью css.

До:

--------------
th1  th2  th3
--------------
col1 col2 col3
--------------

Что я хочу:

--------- ----
th1  th2  th3
--------- ----
col1 col2 col3
--------- ----

Там, где разрыв может произойти в произвольной позиции - не обязательно второй до последней.Также я хотел бы иметь несколько разрывов столбцов.

Использование React - я мог бы настроить flexbox и разбить данные на несколько таблиц, но мне было интересно, есть ли более простой способ с css

Answer 1

Вы можете использовать селектор nth-of-type на вашем css ( см. Некоторые примеры здесь )

Для вашего случая мы можем сделать следующее:

tr td:nth-of-type(2) {
 margin-right: 5px; 
}

Вы можете обобщить это для любых столбцов, которые вы хотите

tr td:nth-of-type(2), tr th:nth-of-type(5) { /* second and fifth colums */
tr td:nth-of-type(3n) { /* every three columns in a row

Посмотрите в Интернете.Существует множество примеров использования этого селектора.
PS: Вы также должны использовать tr th:nth-of-type() для заголовков стола