CSS Table Border: border-collapse and Clean Lines

A table has no borders until you add them. Put the border on the cells, not just on the table.

index.html

HTML

<style>
  table, th, td { border: 1px solid #1a5276; }
</style>
<table>
  <tr><th>Book</th><th>Author</th><th>Price</th></tr>
  <tr><td>The Slow Garden</td><td>M. Okafor</td><td>$14</td></tr>
  <tr><td>Night Trains</td><td>L. Brandt</td><td>$11</td></tr>
  <tr><td>Salt and Paper</td><td>R. Iyer</td><td>$16</td></tr>
</table>

Look closely: every cell has its own border and there is a gap between them, so the lines look doubled.

border-collapse

border-collapse: collapse merges neighbouring borders into one line.

index.html

HTML

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #1a5276; }
</style>
<table>
  <tr><th>Book</th><th>Author</th><th>Price</th></tr>
  <tr><td>The Slow Garden</td><td>M. Okafor</td><td>$14</td></tr>
  <tr><td>Night Trains</td><td>L. Brandt</td><td>$11</td></tr>
  <tr><td>Salt and Paper</td><td>R. Iyer</td><td>$16</td></tr>
</table>

This is how almost every table is styled. The default is separate.

border-spacing

If you keep border-collapse: separate, border-spacing sets the gap between cells.

index.html

HTML

<style>
  table { border-collapse: separate; border-spacing: 8px; }
  th, td { border: 1px solid #1a5276; padding: 6px; }
</style>
<table>
  <tr><th>Book</th><th>Author</th><th>Price</th></tr>
  <tr><td>The Slow Garden</td><td>M. Okafor</td><td>$14</td></tr>
  <tr><td>Night Trains</td><td>L. Brandt</td><td>$11</td></tr>
  <tr><td>Salt and Paper</td><td>R. Iyer</td><td>$16</td></tr>
</table>

border-spacing has no effect when borders are collapsed.

Light borders look better

Heavy borders on every cell make a table look busy. A common modern style uses only horizontal lines:

style.css

CSS

1
2

table { border-collapse: collapse; }
th, td { border-bottom: 1px solid #e6ddd7; padding: 10px 14px; text-align: left; }

warning

Rounded corners on tables

border-radius on a table does nothing while border-collapse: collapse is on. Wrap the table in a div with border-radius and overflow: hidden, or round the corner cells individually.