How to Let a Table'S Body Scroll But Keep Its Head Fixed in Place

Table fixed header and scrollable body

Here is the working solution:

table {    width: 100%;}
thead, tbody, tr, td, th { display: block; }
tr:after { content: ' '; display: block; visibility: hidden; clear: both;}
thead th { height: 30px;
/*text-align: left;*/}
tbody { height: 120px; overflow-y: auto;}
thead { /* fallback */}

tbody td, thead th { width: 19.2%; float: left;}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> </tbody></table>

Table header to stay fixed at the top when user scrolls it out of view with jQuery

You would do something like this by tapping into the scroll event handler on window, and using another table with a fixed position to show the header at the top of the page.

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
var offset = $(this).scrollTop();

if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
} else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
#header-fixed {
position: fixed;
top: 0px;
display: none;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>

Scrollable table body and fixed header

try this css :

.table-container {    height: 20em;    width:100%}table {    display: flex;    flex-flow: column;    height: 100%;    width: 100%;}table thead {    /* head takes the height it requires,     and it's not scaled when table is resized */    flex: 0 0 auto;    width: calc(100% - 0.9em);}table tbody {    /* body takes all the remaining available space */    flex: 1 1 auto;    display: block;    overflow-y: scroll;}table tbody tr {    width: 100%;}table thead,table tbody tr {    display: table;    table-layout: fixed;}/* decorations */.table-container {    border: 1px solid black;    padding: 0.3em;}table {    border: 1px solid lightgrey;}table td, table th {    padding: 0.3em;    border: 1px solid lightgrey;}table th {    border: 1px solid grey;}
<div class="table-container"><table>
<thead> <tr> <th rowspan="2">Location</th> <th rowspan="2">Updated</th> <th colspan="2">Temperature [°C]</th> <th colspan="2">Wind [m/s]</th> <th rowspan="2">Air pressure [hPa]</th> <th rowspan="2">Relative humidity [%]</th> <th rowspan="2">Precipitation [mm]</th> </tr> <tr><th>present</th><th>wind chill</th><th>speed</th><th>max</th> </tr></thead><tbody> <tr> <td>Aasiaat</td> <td>20.07 15:00</td> <td>9,3</td> <td></td> <td>2,5 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> <tr> <td>Angisoq</td> <td>20.07 15:00</td> <td>5,9</td> <td></td> <td>3,6 ⇐</td> <td>4,6</td> <td>1013</td> <td>85,0</td> <td>n/a</td> </tr> <tr> <td>Aasiaat</td> <td>20.07 15:00</td> <td>9,3</td> <td></td> <td>2,5 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> <tr> <td>Test3</td> <td>20.07 15:00</td> <td>9,3</td> <td></td> <td>2,5 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> <tr> <td>Test4</td> <td>20.07 15:00</td> <td>9,3</td> <td></td> <td>2,5 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> <tr> <td>Test5</td> <td>20.07 15:00</td> <td>9,3</td> <td></td> <td>2,5 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> </tbody></table>
</div>

table with fixed thead and scrollable tbody

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>

Table - fixed header, scrollable body, most robust/simple solution?

<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>

This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding .

The width of the outer must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.

CSS-Tricks also talks about using JavaScript and CSS to help with this as well so you can use highlighting. Here is the link to that article.

Keeping the horizontal scroll position of a fixed header in sync with the body

Pretty simple with:

<th>'s style set to sticky,

top: 0 to stick to top, and

background-color: white to "hide" scrolled rows.

nowrap used for horizontal effect (not necessary).

th {
position: sticky;
top: 0;
background-color: white;
}
<table border="1">
<tr>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
<th>sticky blah blah blah sticky </th>
</tr>
<tr>
<td nowrap>normal blah blah blah normal 01</td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
<td nowrap>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 02</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 03</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 04</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 05</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 06</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 07</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 08</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 09</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 10</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 11</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 12</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 13</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 14</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 15</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 16</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 17</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 18</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 19</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 20</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 21</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 22</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 23</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 24</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 25</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 26</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 27</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 28</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 29</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 30</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 31</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 32</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 33</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
</tr>
<tr>
<td>normal blah blah blah normal 34</td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah blah normal </td>
<td>normal blah blah bl

Related Topics



Leave a reply



Submit