Question

I am trying to figure out how to add border only inside the table with the cell spacing. When I do:

table {
  border-collapse: collapse;
  border-spacing: 4px;
}
table td, table th {
  border: 1px solid black;
}

It works almost fine just cells without spacing. How to achieve that?

Thanks

Answer 1

If you’re trying to write CSS rules for tables on which you’ve defined the cellspacing attribute, a solution could be this :

table[cellspacing] {
  border-collapse: collapse;
  border-spacing: 4px;
}
table[cellspacing] td, table[cellspacing] th {
  border: 1px solid black;
}

But it would be much cleaner and more efficient to give a class to your table (<table class="withspace">). So you would more classically do

table.withspace {
  border-collapse: collapse;
  border-spacing: 4px;
}
table.withspace td, table.withspace th {
  border: 1px solid black;
}

EDIT : just in case, if what you want is simply to have some space in your cells, add a padding value in your css :

table {
  border-collapse: collapse;
  border-spacing: 4px;
}
table td, table th {
  border: 1px solid black;
  padding: 4px;
}