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