标题不滚动表固定标题

我有固定标题的设计表，但问题是，在较小的设备表体使用水平滚动，但保持固定我的表格宽度是百分比值。标题不滚动表固定标题

这里是我的代码：

.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>

你能帮帮我吗？

来源

2017-03-03 Humaira Naaz

以及这不仅可以使用CSS来实现，你肯定会需要使用一些脚本，jqurey将是一个伟大的交易，处理这个问题，请参考下面的答案中提到的解决方案 –

[固定水平滚动条和垂直滚动条的页眉表]的可能重复（http://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on） –