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?
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.
Loved by over 4 million developers and more than 90,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.