如何在 html 中分隔 table 的列？

Question

我想分隔 table 的列，像图像一样在它们之间添加一个间隙，但我得到的最好的是分隔 table 的所有列（https://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-spacing)，我只想要单独的特定列，例如在 4-2-2-2 中分隔 10 列的 table。

这就是我想要实现的。

这是我用 border-collapse: separate 得到的最好的；和边框间距：15px 0px； (https://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-spacing)

Answer 1

table tr th:nth-child(4){
  padding-right: 50px;
}

table tr th:nth-child(6){
  padding-right: 50px;
}

table tr th:nth-child(8){
  padding-right: 50px;
}

table tr th {
  background-color: lightgray;
}

<table>
  <tr>
    <th>TH</th>
    <th>TH</th>
    <th>TH</th>
    <th>TH</th>
    <th>TH</th>
    <th>TH</th>
    <th>TH</th>
    <th>TH</th>
    <th>TH</th>
    <th>TH</th>
  </tr>
  <tr>
    <td>TD1</td>
    <td>TD1</td>
    <td>TD1</td>
    <td>TD1</td>
    <td>TD1</td>
    <td>TD1</td>
    <td>TD1</td>
    <td>TD1</td>
    <td>TD1</td>
    <td>TD1</td>
  </tr>
  <tr>
    <td>TD2</td>
    <td>TD2</td>
    <td>TD2</td>
    <td>TD2</td>
    <td>TD2</td>
    <td>TD2</td>
    <td>TD2</td>
    <td>TD2</td>
    <td>TD2</td>
    <td>TD2</td>   
  </tr>
  <tr>
    <td>TD3</td>
    <td>TD3</td>
    <td>TD3</td>
    <td>TD3</td>
    <td>TD3</td>
    <td>TD3</td>
    <td>TD3</td>
    <td>TD3</td>
    <td>TD3</td>
    <td>TD3</td>    
  </tr>
</table>

您可以按照评论中建议的@StackSlave 使用填充来分隔列。

但此外，您可以将 nth-child 元素作为目标，如我的 CSS 中所示，将 table 分成列，即 10 列变为 4-2-2- 2

如何在 html 中分隔 table 的列？

How can I separate columns of a table in html?

html

css

spacing