如何在表列之间添加空格

Question

我正在尝试格式化表格，以便使用CSS在特定列之间留有空格。

之前：

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

我想要什么：

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

中断可以在任意位置发生-不一定要倒数第二个。我也想有多个分栏符。

使用React-我可能可以设置一个Flexbox并将数据拆分成多个表，但是我想知道CSS是否有更简单的方法

Answer 1

您可以在CSS（see some examples here）上使用nth-of-type选择器

对于您的情况，我们可以执行以下操作：

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

在Internet上查看。关于如何使用此选择器的例子很多。
附注：您还应该使用tr th:nth-of-type()作为桌头