In an attempt to add spacing between the first row, second row, and footer of a table, I have experimented with cell spacing combined with border-collapse. However, the spacing is being applied all over the table instead of in specific areas. I am utilizing MUI styled components with React for this project. I have explored different solutions such as using multiple tables, applying CSS rules like border-spacing and border-collapse, but none of them seem to be coding it correctly.
I aim to create a table layout that resembles the following:
https://i.stack.imgur.com/zQl5b.png
Below is an excerpt from the existing code:
<table class="tableClass">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
<th>header 5</th>
</tr>
</thead>
<tbody>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
<td>content 5</td>
</tbody>
</table>.tableClass{ border-collapse: separate; border-spacing: 10px 0px;}
UPDATE (Solution)
To achieve the desired effect, leaving an empty cell and applying the empty-cell: hide rule seems to work effectively. Thank you for the assistance, and I apologize for any confusion in my initial question.