I am facing an issue with the design of my table where the header is fixed but the body scrolls horizontally on smaller devices, while the width of the table is set as a percentage value.
Below is the code I have:
.fixed_headers { width: 100%; table-layout: fixed; background: #ddd; border-radius: 5px; }
.fixed_headers thead { display: flex; border-radius: 5px 5px 0 0; }
.fixed_headers td { border-bottom: 1px solid #f00; }
.fixed_headers td,
.fixed_headers th { flex: 1 1; line-height: 40px; font-family: 'DIN Alternate'; font-size: 20px; text-align: left; padding: 0 10px; margin-top: 6px !important; }
.fixed_headers thead th, .fixed_headers thead th h5{ text-shadow: 1px 1px 3px #000; font-size: 20px; margin: 0; line-height: 32px; }
.fixed_headers tr{ display: flex !important; width: 100%; }
.fixed_headers thead { background-color: #f00; color: #fdfdfd; }
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) { min-width: 100px; width: 20%; }
.fixed_headers td:nth-child(2),
...
<table class="fixed_headers" border="0" cellspacing="0" cellpadding="0" id="list">
<thead>
<tr>
<th>
<h5>DATA</h5>
</th>
<th>
<h5>NOME COMPLETO</h5>
...
</tbody>
</table>A solution to this problem would be greatly appreciated. Can someone please assist me?