Question

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

你能帮帮我吗？

Answer 1

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

此处的解决方案：https://stackoverflow.com/a/35947146/2432554

标题不在表格固定标题上滚动

1 个答案: