HTML table needs spacing between columns, not rows

Question

I have an HTML table. I need to have spacing between the table columns, but not the table rows.

If I use the cellspacing CSS property it does it between bot

Answer 1

This can be achieved by putting padding between the columns using CSS. You can either add padding to the left of all columns except the first, or add padding to the right of all columns except the last. You should avoid adding padding to the right of the last column or to the left of the first as this will insert redundant white space. You should also avoid being too prescriptive with classes to specify which columns should have the additional padding as this will make maintenance harder if you later add a new column.

The 'lobotomised owl selector' allows you to select all siblings, regardless of if they are a th, td or something else.

tr > * + * {
  padding-left: 4em;
}

  

    

      
Column 1
      
Column 2
      
Column 3
    
  
  

    

      
Data 1
      
Data 2
      
Data 3