0

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Humaira Naaz
  • 280
  • 2
  • 12
  • well this can't be achieved using CSS only, you would definitely have to use some scripts, jqurey will be a great deal to handle this, refer to the mentioned solution in below answer – Hassan Zia Mar 03 '17 at 17:00
  • Possible duplicate of [Fixed header table with horizontal scrollbar and vertical scrollbar on](http://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on) – Hassan Zia Mar 03 '17 at 17:01

1 Answers1

0

You will have to separate your header and body in 2 tables and set fixed widths on your columns (or use JavaScript to set it up). Then when you scroll left on your body, you scroll on the header with JavaScript.

Solution right here : https://stackoverflow.com/a/35947146/2432554

Community
  • 1
  • 1
Zetura
  • 446
  • 5
  • 12