How to set cell padding and cell spacing in CSS
Matthew C.
—The Problem
You have a table such as the table shown below:
<table> <tr> <th>Name</th> <th>Age</th> <th>Location</th> </tr> <tr> <td>Jessie</td> <td>22</td> <td>Brazil</td> </tr> <tr> <td>Luke</td> <td>30</td> <td>England</td> </tr> <tr> <td>Samantha</td> <td>24</td> <td>Cambodia</td> </tr> </table>
The <td> elements, which define the cells of the table that contain data, have a border so that you can see the table cells:
td { border: 1px solid black; }
How do you set the padding inside the cells and the spacing between the cells?
The Solution
To set the cell padding, set the padding of the <td> elements:
td { padding: 1rem; }
To set the spacing between cells, set the border-spacing property of the <table> element:
table { border-spacing: 30px; }
Note that border-spacing does not have any effect if the border-collapse property of the <table> element is set to “collapse”. The border-collapse property determines whether the cells share borders or have separate borders. When set to “collapse”, the cells share borders.
- Syntax.fmListen to the Syntax Podcast
- ResourcesWhat is Distributed Tracing
- Listen to the Syntax Podcast
![Syntax.fm logo]()
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODES
Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.