標題不滾動表固定標題

我有固定標題的設計表，但問題是，在較小的設備表體使用水平滾動，但保持固定我的表格寬度是百分比值。標題不滾動表固定標題

這裏是我的代碼：

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