表头未在表固定表头上滚动

Question

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

下面是我的代码：

​

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

​

你能帮帮我吗？

Answer 1

您必须在两个表中分隔标题和正文，并在列上设置固定宽度(或使用JavaScript进行设置)。然后当你在身体上向左滚动时，你可以用JavaScript在标题上滚动。

解决方案就在这里：https://stackoverflow.com/a/35947146/2432554