How can I separate columns of a table in 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)

One approach is to create 3 different `tables` – Awais Nov 21 '19 at 06:36 — Awais, Nov 21 '19 at 06:36

score 1 · Accepted Answer · answered Nov 21 '19 at 03:48

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, i.e. 10 columns becomes 4-2-2-2

How can I remove the background color that appears in the gaps between the columns. — bryan-gc, Nov 27 '19 at 20:26
If you wish to do that, the easiest & most reliable way would be to have seperate tables with the same styling class attached. The reason I say this, is because if you want to have defined LHS or RHS borders, you will need to have some extremely complex CSS which could have unreliable results in cross-browser situations. The best approach for you would be to have different tables. — EGC, Nov 27 '19 at 20:41

How can I separate columns of a table in html?

1 Answers1