6/11/24, 6:40 PM css - HTML Table with spaces - Stack Overflow
2024 Developer survey is here and we would like to hear from you! Take the 2024 Developer Survey
HTML Table with spaces [duplicate]
Asked 2 years, 11 months ago Modified 2 years, 11 months ago Viewed 348 times
This question already has answers here:
Set cellpadding and cellspacing in CSS? (19 answers)
2
Closed 2 years ago.
This is an easy question, but it's super frustrating for someone who is not using html for ages. My
html table can be seen at the following:
https://jsfiddle.net/mr_muscle/Lw5o7ary/
with below html:
<table>
<thead>
<tr>
<th>Account status:</th>
<th>Portfolios invested:</th>
<th>Date joined:</th>
<th>MangoPay status:</th>
<th>NorthRow status:</th>
<th>Investor type:</th>
</tr>
</thead>
<tbody>
<tr>
<td>status</td>
<td>Number of portfolios</td>
<td>17 Feb, 2019</td>
<td>Approved</td>
<td>Approved</td>
<td>Inexperienced</td>
</tr>
<tr>
<td colspan='2'>Suspend user</td>
<td colspan='2'>Member for 1 y, 10m</td>
<td>Change</td>
</tr>
</tbody>
https://stackoverflow.com/questions/68069948/html-table-with-spaces?noredirect=1&lq=1 1/4
6/11/24, 6:40 PM css - HTML Table with spaces - Stack Overflow
Which will give me tables without spaces. How to achieved something similar to this:
html css
Share Improve this question Follow asked Jun 21, 2021 at 14:41
mr_muscle
2,810 2 22 82
1 Take a look on border-spacing at MDN Web Docs. – Jax-p Jun 21, 2021 at 14:47
2 Answers Sorted by: Highest score (default)
Change Style accordingly
2 table {
border-collapse: separate;
border-spacing: 0 15px;
}
th {
margin: 10px;
padding: 25px;
}
td {
margin: 51px;
padding: 29px;
}
<table>
<thead>
<tr>
<th>Account status:</th>
<th>Portfolios invested:</th>
<th>Date joined:</th>
<th>MangoPay status:</th>
<th>NorthRow status:</th>
<th>Investor type:</th>
</tr>
</thead>
<tbody>
<tr>
<td>status</td>
<td>Number of portfolios</td>
https://stackoverflow.com/questions/68069948/html-table-with-spaces?noredirect=1&lq=1 2/4
6/11/24, 6:40 PM css - HTML Table with spaces - Stack Overflow
<td>17 Feb, 2019</td>
<td>Approved</td>
<td>Approved</td>
<td>Inexperienced</td>
</tr>
<tr>
<td colspan='2'>Suspend user</td>
<td colspan='2'>Member for 1 y, 10m</td>
<td>Change</td>
</tr>
</tbody>
</table>
Run code snippet Expand snippet
Share Improve this answer Follow edited Jun 21, 2021 at 15:04 answered Jun 21, 2021 at 15:03
isherwood Kenit
60.3k 16 119 164 137 1 1 13
You can add a padding to your table cells:
1 td {
padding-left: 20px;
padding-right: 20px;
}
<table>
<thead>
<tr>
<th>Account status:</th>
<th>Portfolios invested:</th>
<th>Date joined:</th>
<th>MangoPay status:</th>
<th>NorthRow status:</th>
<th>Investor type:</th>
</tr>
</thead>
<tbody>
<tr>
<td>status</td>
<td>Number of portfolios</td>
<td>17 Feb, 2019</td>
<td>Approved</td>
<td>Approved</td>
<td>Inexperienced</td>
</tr>
<tr>
<td colspan='2'>Suspend user</td>
<td colspan='2'>Member for 1 y, 10m</td>
<td>Change</td>
</tr>
https://stackoverflow.com/questions/68069948/html-table-with-spaces?noredirect=1&lq=1 3/4
6/11/24, 6:40 PM css - HTML Table with spaces - Stack Overflow
</tbody>
</table>
Run code snippet Expand snippet
Share Improve this answer Follow edited Jun 21, 2021 at 15:06 answered Jun 21, 2021 at 14:47
isherwood Rendolph
60.3k 16 119 164 431 2 9
https://stackoverflow.com/questions/68069948/html-table-with-spaces?noredirect=1&lq=1 4/4
