How can I achieve the table layout with a gap between columns, as shown in the design? Initially, I tried using border-collapse: separate but found it difficult to adjust borders in the tbody. So, I switched to collapse. Is this the right approach for creating this table, or should I explore other options? I searched for answers here but couldn't find a satisfactory solution. https://i.sstatic.net/rERWRP0k.png
I have implemented the following CSS:
.table-container {
overflow: hidden;
}
[data-module=data-table] {
border-collapse: collapse;
border-spacing: 16px 0;
table-layout: fixed;
}
[data-module=data-table] thead {
margin-top: 40px;
}
...
<div class="table-container">
<table data-module="data-table">
<thead>
...
</tr>
</tbody>
</table>
</div>