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, andbackground-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
How to Simulate a Click to an Anchor Tag
How to Use Mechanize to Process JavaScript
Get the Position of a Div/Span Tag
Retrieving the Text of the Selected ≪Option≫ in ≪Select≫ Element
How to Insert a Row in an HTML Table Body in JavaScript
What Are Data-* HTML Attributes
Disable Interpolation When Scaling a ≪Canvas≫
Pass a String Parameter in an Onclick Function
How to Prevent a Click on a '#' Link from Jumping to Top of Page
Restricting Input to Textbox: Allowing Only Numbers and Decimal Point
Selecting All Text in HTML Text Input When Clicked
How to Set Value of Input Text Using Jquery
Execute PHP Function With Onclick
Html-Encoding Lost When Attribute Read from Input Field
Addeventlistener("Click",...) Firing Immediately
How to Validate Inputs Dynamically Created Using Ng-Repeat, Ng-Show (Angular)