I have design table with fixed header but the problem is that in smaller device table body using horizontal scroll but stay fixed my table width is percentage value.
Here is my code:
.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), .fixed_headers th:nth-child(2) { width: 30%; min-width: 250px; } .fixed_headers td { font-size: 18px; } .fixed_headers td:nth-child(3), .fixed_headers th:nth-child(3) { width: 20%; min-width: 150px; } .fixed_headers td:nth-child(4), .fixed_headers th:nth-child(4) { width: 30%; min-width: 150px; } .fixed_headers thead tr { display: block; position: relative; } .fixed_headers tbody { display: block; overflow: auto; width: 100%; height: 130px; } .fixed_headers tbody::-webkit-scrollbar { width: 10px; } .fixed_headers tbody::-webkit-scrollbar-thumb { border-radius: 10px; background: #f00; border: 2px solid white; }<table class="fixed_headers" border="0" cellspacing="0" cellpadding="0" id="list"> <thead> <tr> <th> <h5>DATA</h5> </th> <th> <h5>NOME COMPLETO</h5> </th> <th> <h5>TELEFONE</h5> </th> <th> <h5>PRÊMIO</h5> </th> </tr> </thead> <tbody> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> <tr> <td>2017-03-01</td> <td>André Oliveira</td> <td>(21)96772-2098</td> <td>R$ 1.000,00</td> </tr> </tbody> </table>Can you please help me?
