DEVHIDE
Login Or Sign up

<table> with fixed <thead> and scrollable <tbody>

114.2k Views Asked by At

I've looked through questions here and articles all over the internet, but haven't found yet solution that would satisfy my requirements. So now in 2017, is there an elegant way to have a <table> that would:

  1. be written in html+css (no js)
  2. have fixed header (not scrollable; not sticky)
  3. have scrollable <tbody> (scrollbar may be always visible)
  4. header and body would handle resizing properly and not mess alignment of the <thead> columns and the <tbody> columns
  5. would not use nested tables or separate table for header
html css html-table scrollbar fixed-header-tables
Original Q&A
5

There are 5 best solutions below

2
On BEST ANSWER

This solution fulfills all 5 requirements:

table {
  width: 100%;
}

table, td {
  border-collapse: collapse;
  border: 1px solid #000;
}

thead {
  display: table; /* to take the same width as tr */
  width: calc(100% - 17px); /* - 17px because of the scrollbar width */
}

tbody {
  display: block; /* to enable vertical scrolling */
  max-height: 200px; /* e.g. */
  overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

th, td {
  width: 33.33%; /* to enable "word-break: break-all" */
  padding: 5px;
  word-break: break-all; /* 4. */
}

tr {
  display: table; /* display purpose; th's border */
  width: 100%;
  box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
}

td {
  text-align: center;
  border-bottom: none;
  border-left: none;
}
<table> 
  <thead> 
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>Data1111111111111111111111111</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data2222222222222222222222222</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data3333333333333333333333333</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

1
On

How about this?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
    max-width:980px;
    table-layout:fixed;
    margin:auto;
}
th, td {
    padding:5px 10px;
    border:1px solid #000;
}
thead, tfoot {
    background:#f9f9f9;
    display:table;
    width:100%;
    width:calc(100% - 18px);
}
tbody {
    height:300px;
    overflow:auto;
    overflow-x:hidden;
    display:block;
    width:100%;
}
tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th scope="col">Header 1                    </th>
                <th scope="col">Header 2                    </th>
                <th scope="col">Header 3                    </th>
                <th scope="col">Header 4                    </th>
            </tr>
        </thead>
    <tbody>
    <tr>
        <td>Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    </tbody>
    <tfoot>
        <tr>
        <td>Footer 1        </td>
        <td>Footer 2        </td>
        <td>Footer 3        </td>
        <td>Footer 4        </td>
        </tr>
    </tfoot>
    </table>
</body>
</html>

I've created a fiddle below

https://jsfiddle.net/jchaplin2/dt829611/1/

2
On

Short Answer: No, not possible.

VXp's answer is interesting but doesn't work as you might expect. It has 2 issues:

  1. The table width must be set to specific fixed width, you cannot have dynamic width with this solution. That's why he set the width to 600px of the table.
  2. If any cell has long text, the whole layout will break (improperly aligned columns).

Same thing for Jon's answer.

I discourage using fixed table head, but if you really want to do this with the set of rules you enumerated (the 5 rules you mentioned), the only solution is using js/jQuery.

1
On 

.table-sticky>thead>tr>th,
.table-sticky>thead>tr>td {
 background: #009688;
 color: #fff;
 top: 0px;
 position: sticky;
}
.table-height {
 height: 320px;
 display: block;
 overflow: scroll;
 width: 100%;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td {
 border: 1px solid #ddd;
}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>Fixed Table Header</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
   </head>
   <body>
      <div id="container">
         <div class="table-responsive table-height">
            <table class="table table-bordered table-striped table-hover table-sticky">
               <thead style="background:#1e91cf;color:#fff">
                  <tr>
                     <th class="text-center" rowspan="2"> Product</th>
                     <th class="text-center" colspan="2"> Sellable</th>
                     <th class="text-center" colspan="2"> Unsellable</th>
                     <th class="text-center" colspan="2"> Total</th>
                     <th class="text-center" colspan="6">2018-July</th>
                     <th class="text-center" colspan="6">2018-June</th>
                     <th class="text-center" colspan="6">2018-May</th>
                     <th class="text-center" colspan="6">2018-April</th>
                  </tr>
                  <tr>
                     <th class="text-center" style="top: 23px;"> Units</th>
                     <th class="text-center" style="top: 23px;"> Amount</th>
                     <th class="text-center" style="top: 23px;"> Units</th>
                     <th class="text-center" style="top: 23px;"> Amount</th>
                     <th class="text-center" style="top: 23px;"> Units</th>
                     <th class="text-center" style="top: 23px;"> Amount</th>
                     <th class="text-center" style="top: 23px;">SU</th>
                     <th class="text-center" style="top: 23px;">SA</th>
                     <th class="text-center" style="top: 23px;">UU</th>
                     <th class="text-center" style="top: 23px;">UA</th>
                     <th class="text-center" style="top: 23px;">TU</th>
                     <th class="text-center" style="top: 23px;">TA</th>
                     <th class="text-center" style="top: 23px;">SU</th>
                     <th class="text-center" style="top: 23px;">SA</th>
                     <th class="text-center" style="top: 23px;">UU</th>
                     <th class="text-center" style="top: 23px;">UA</th>
                     <th class="text-center" style="top: 23px;">TU</th>
                     <th class="text-center" style="top: 23px;">TA</th>
                     <th class="text-center" style="top: 23px;">SU</th>
                     <th class="text-center" style="top: 23px;">SA</th>
                     <th class="text-center" style="top: 23px;">UU</th>
                     <th class="text-center" style="top: 23px;">UA</th>
                     <th class="text-center" style="top: 23px;">TU</th>
                     <th class="text-center" style="top: 23px;">TA</th>
                     <th class="text-center" style="top: 23px;">SU</th>
                     <th class="text-center" style="top: 23px;">SA</th>
                     <th class="text-center" style="top: 23px;">UU</th>
                     <th class="text-center" style="top: 23px;">UA</th>
                     <th class="text-center" style="top: 23px;">TU</th>
                     <th class="text-center" style="top: 23px;">TA</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-GG-16GB-D</td>
                     <td class="text-left">1244</td>
                     <td class="text-left">75,12,756</td>
                     <td class="text-left">173</td>
                     <td class="text-left">10,50,827</td>
                     <td class="text-left">1417</td>
                     <td class="text-left">85,63,583</td>
                     <td class="text-left">11</td>
                     <td class="text-left">65,989</td>
                     <td class="text-left">3</td>
                     <td class="text-left">18,497</td>
                     <td class="text-left">14</td>
                     <td class="text-left">84,486</td>
                     <td class="text-left">112</td>
                     <td class="text-left">6,71,888</td>
                     <td class="text-left">17</td>
                     <td class="text-left">1,01,983</td>
                     <td class="text-left">129</td>
                     <td class="text-left">7,73,871</td>
                     <td class="text-left">649</td>
                     <td class="text-left">38,93,351</td>
                     <td class="text-left">85</td>
                     <td class="text-left">5,10,415</td>
                     <td class="text-left">734</td>
                     <td class="text-left">44,03,766</td>
                     <td class="text-left">472</td>
                     <td class="text-left">28,81,528</td>
                     <td class="text-left">68</td>
                     <td class="text-left">4,19,932</td>
                     <td class="text-left">540</td>
                     <td class="text-left">33,01,460</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-GG-32GB-D</td>
                     <td class="text-left">2140</td>
                     <td class="text-left">1,50,25,360</td>
                     <td class="text-left">453</td>
                     <td class="text-left">31,98,547</td>
                     <td class="text-left">2593</td>
                     <td class="text-left">1,82,23,907</td>
                     <td class="text-left">222</td>
                     <td class="text-left">15,53,778</td>
                     <td class="text-left">41</td>
                     <td class="text-left">2,86,959</td>
                     <td class="text-left">263</td>
                     <td class="text-left">18,40,737</td>
                     <td class="text-left">558</td>
                     <td class="text-left">39,05,442</td>
                     <td class="text-left">113</td>
                     <td class="text-left">7,90,887</td>
                     <td class="text-left">671</td>
                     <td class="text-left">46,96,329</td>
                     <td class="text-left">798</td>
                     <td class="text-left">55,85,202</td>
                     <td class="text-left">168</td>
                     <td class="text-left">11,78,332</td>
                     <td class="text-left">966</td>
                     <td class="text-left">67,63,534</td>
                     <td class="text-left">562</td>
                     <td class="text-left">39,80,938</td>
                     <td class="text-left">131</td>
                     <td class="text-left">9,42,369</td>
                     <td class="text-left">693</td>
                     <td class="text-left">49,23,307</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-MG-16GB-DAR</td>
                     <td class="text-left">371</td>
                     <td class="text-left">22,25,629</td>
                     <td class="text-left">45</td>
                     <td class="text-left">2,69,955</td>
                     <td class="text-left">416</td>
                     <td class="text-left">24,95,584</td>
                     <td class="text-left">39</td>
                     <td class="text-left">2,33,961</td>
                     <td class="text-left">9</td>
                     <td class="text-left">53,991</td>
                     <td class="text-left">48</td>
                     <td class="text-left">2,87,952</td>
                     <td class="text-left">294</td>
                     <td class="text-left">17,63,706</td>
                     <td class="text-left">32</td>
                     <td class="text-left">1,91,968</td>
                     <td class="text-left">326</td>
                     <td class="text-left">19,55,674</td>
                     <td class="text-left">38</td>
                     <td class="text-left">2,27,962</td>
                     <td class="text-left">4</td>
                     <td class="text-left">23,996</td>
                     <td class="text-left">42</td>
                     <td class="text-left">2,51,958</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-MG-32GB-D</td>
                     <td class="text-left">6</td>
                     <td class="text-left">44,994</td>
                     <td class="text-left">3</td>
                     <td class="text-left">22,497</td>
                     <td class="text-left">9</td>
                     <td class="text-left">67,491</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">7,499</td>
                     <td class="text-left">1</td>
                     <td class="text-left">7,499</td>
                     <td class="text-left">3</td>
                     <td class="text-left">22,497</td>
                     <td class="text-left">1</td>
                     <td class="text-left">7,499</td>
                     <td class="text-left">4</td>
                     <td class="text-left">29,996</td>
                     <td class="text-left">3</td>
                     <td class="text-left">22,497</td>
                     <td class="text-left">1</td>
                     <td class="text-left">7,499</td>
                     <td class="text-left">4</td>
                     <td class="text-left">29,996</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-RG-32GB-D</td>
                     <td class="text-left">1459</td>
                     <td class="text-left">1,09,84,041</td>
                     <td class="text-left">335</td>
                     <td class="text-left">25,23,665</td>
                     <td class="text-left">1794</td>
                     <td class="text-left">1,35,07,706</td>
                     <td class="text-left">141</td>
                     <td class="text-left">10,57,359</td>
                     <td class="text-left">40</td>
                     <td class="text-left">2,99,960</td>
                     <td class="text-left">181</td>
                     <td class="text-left">13,57,319</td>
                     <td class="text-left">558</td>
                     <td class="text-left">41,84,442</td>
                     <td class="text-left">116</td>
                     <td class="text-left">8,69,884</td>
                     <td class="text-left">674</td>
                     <td class="text-left">50,54,326</td>
                     <td class="text-left">369</td>
                     <td class="text-left">27,67,131</td>
                     <td class="text-left">101</td>
                     <td class="text-left">7,57,399</td>
                     <td class="text-left">470</td>
                     <td class="text-left">35,24,530</td>
                     <td class="text-left">391</td>
                     <td class="text-left">29,75,109</td>
                     <td class="text-left">78</td>
                     <td class="text-left">5,96,422</td>
                     <td class="text-left">469</td>
                     <td class="text-left">35,71,531</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5PLUS-MB-32GB-D</td>
                     <td class="text-left">5</td>
                     <td class="text-left">39,995</td>
                     <td class="text-left">4</td>
                     <td class="text-left">31,996</td>
                     <td class="text-left">9</td>
                     <td class="text-left">71,991</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">5</td>
                     <td class="text-left">39,995</td>
                     <td class="text-left">4</td>
                     <td class="text-left">31,996</td>
                     <td class="text-left">9</td>
                     <td class="text-left">71,991</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-VISION3-16GB-D</td>
                     <td class="text-left">4005</td>
                     <td class="text-left">2,80,30,995</td>
                     <td class="text-left">618</td>
                     <td class="text-left">43,25,382</td>
                     <td class="text-left">4623</td>
                     <td class="text-left">3,23,56,377</td>
                     <td class="text-left">28</td>
                     <td class="text-left">1,95,972</td>
                     <td class="text-left">8</td>
                     <td class="text-left">55,992</td>
                     <td class="text-left">36</td>
                     <td class="text-left">2,51,964</td>
                     <td class="text-left">234</td>
                     <td class="text-left">16,37,766</td>
                     <td class="text-left">44</td>
                     <td class="text-left">3,07,956</td>
                     <td class="text-left">278</td>
                     <td class="text-left">19,45,722</td>
                     <td class="text-left">1727</td>
                     <td class="text-left">1,20,87,273</td>
                     <td class="text-left">241</td>
                     <td class="text-left">16,86,759</td>
                     <td class="text-left">1968</td>
                     <td class="text-left">1,37,74,032</td>
                     <td class="text-left">2016</td>
                     <td class="text-left">1,41,09,984</td>
                     <td class="text-left">325</td>
                     <td class="text-left">22,74,675</td>
                     <td class="text-left">2341</td>
                     <td class="text-left">1,63,84,659</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-VISION3-BL-16GB-D</td>
                     <td class="text-left">9344</td>
                     <td class="text-left">6,53,98,656</td>
                     <td class="text-left">1161</td>
                     <td class="text-left">81,25,839</td>
                     <td class="text-left">10505</td>
                     <td class="text-left">7,35,24,495</td>
                     <td class="text-left">301</td>
                     <td class="text-left">21,06,699</td>
                     <td class="text-left">60</td>
                     <td class="text-left">4,19,940</td>
                     <td class="text-left">361</td>
                     <td class="text-left">25,26,639</td>
                     <td class="text-left">2339</td>
                     <td class="text-left">1,63,70,661</td>
                     <td class="text-left">304</td>
                     <td class="text-left">21,27,696</td>
                     <td class="text-left">2643</td>
                     <td class="text-left">1,84,98,357</td>
                     <td class="text-left">3745</td>
                     <td class="text-left">2,62,11,255</td>
                     <td class="text-left">440</td>
                     <td class="text-left">30,79,560</td>
                     <td class="text-left">4185</td>
                     <td class="text-left">2,92,90,815</td>
                     <td class="text-left">2959</td>
                     <td class="text-left">2,07,10,041</td>
                     <td class="text-left">357</td>
                     <td class="text-left">24,98,643</td>
                     <td class="text-left">3316</td>
                     <td class="text-left">2,32,08,684</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-VISION3PRO-MNB-</td>
                     <td class="text-left">620</td>
                     <td class="text-left">68,19,380</td>
                     <td class="text-left">104</td>
                     <td class="text-left">11,43,896</td>
                     <td class="text-left">724</td>
                     <td class="text-left">79,63,276</td>
                     <td class="text-left">47</td>
                     <td class="text-left">5,16,953</td>
                     <td class="text-left">13</td>
                     <td class="text-left">1,42,987</td>
                     <td class="text-left">60</td>
                     <td class="text-left">6,59,940</td>
                     <td class="text-left">198</td>
                     <td class="text-left">21,77,802</td>
                     <td class="text-left">46</td>
                     <td class="text-left">5,05,954</td>
                     <td class="text-left">244</td>
                     <td class="text-left">26,83,756</td>
                     <td class="text-left">344</td>
                     <td class="text-left">37,83,656</td>
                     <td class="text-left">45</td>
                     <td class="text-left">4,94,955</td>
                     <td class="text-left">389</td>
                     <td class="text-left">42,78,611</td>
                     <td class="text-left">31</td>
                     <td class="text-left">3,40,969</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">31</td>
                     <td class="text-left">3,40,969</td>
                  </tr>
                  <tr>
                     <td class="text-left">MOTO-G5-FG-16GB</td>
                     <td class="text-left">52</td>
                     <td class="text-left">4,27,812</td>
                     <td class="text-left">28</td>
                     <td class="text-left">2,36,063</td>
                     <td class="text-left">80</td>
                     <td class="text-left">6,63,875</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">8,985</td>
                     <td class="text-left">1</td>
                     <td class="text-left">8,985</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">8,229</td>
                     <td class="text-left">1</td>
                     <td class="text-left">8,229</td>
                     <td class="text-left">14</td>
                     <td class="text-left">1,15,465</td>
                     <td class="text-left">8</td>
                     <td class="text-left">68,675</td>
                     <td class="text-left">22</td>
                     <td class="text-left">1,84,140</td>
                     <td class="text-left">38</td>
                     <td class="text-left">3,12,347</td>
                     <td class="text-left">18</td>
                     <td class="text-left">1,50,174</td>
                     <td class="text-left">56</td>
                     <td class="text-left">4,62,521</td>
                  </tr>                
                  <tr>
                     <td class="text-left">MOTO-GPLUS4-BL-16GB</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">10,499</td>
                     <td class="text-left">1</td>
                     <td class="text-left">10,499</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">10,499</td>
                     <td class="text-left">1</td>
                     <td class="text-left">10,499</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </body>
</html>

3
On

Chrome, FF, Edge
the simplest solution is to use th { position: sticky; top: 0; } 

/* JUST COMMON TABLE STYLES... */
table { border-collapse: collapse; width: 100%; }
th, td { background: #fff; padding: 8px 16px; }


.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

IE11

To sloppily support IE11 (2.5% market share as of 10/2018), a bit jaggy but at least THs are on top - you could add this JavaScript:

function isIE() {
  return navigator.userAgent.indexOf('MSIE') > -1 || navigator.appVersion.indexOf('Trident/') > -1
}


if (isIE()) {

  // Fix table head
  function tableFixHead(ths) {
    var sT = this.scrollTop;
    [].forEach.call(ths, function(th) {
      th.style.transform = "translateY(" + sT + "px)";
    });
  }

  [].forEach.call(document.querySelectorAll(".tableFixHead"), function(el) {
    var ths = el.querySelectorAll("thead th");
    el.addEventListener("scroll", tableFixHead.bind(el, ths));
  });

}

which will (since IE ignores sticky position) use transform translateY to position the TH elements.

PS: the above JS (without the wrapping if statement) works pretty decently for all other evergreen browsers too - in case position: sticky; does not fits your needs...

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-TABLE

Related Questions in SCROLLBAR

Related Questions in FIXED-HEADER-TABLES

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.