如何在 html 中分隔表的列？

Question

I want to separate columns of a table, adding a gap between them like the image, but the best I have gotten was to separate ALL columns of a table ( https://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-spacing ), and I just want separate specific columns, for example separating a table of 10 columns in 4-2-2-2.

This is what I want to achieve.

And this is best I have goten with border-collapse: separate; and border-spacing: 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>

You can separate columns by using padding as @StackSlave suggested in the comments.

But furthermore, you can target nth-child elements, as seen in my CSS, to break the table up into columns, ie 10 columns becomes 4-2-2-2