How to make fixed header table inside scrollable div?
How about doing something like this? I've made it from scratch...
What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div
element with a fixed height, and to enable scroll, am using overflow-y: auto;
Also make sure you use table-layout: fixed;
with fixed width td
elements so that your table
doesn't break when a string without white space
is used, so inorder to break that string am using word-wrap: break-word;
Demo
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
}
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>
Fixed header in table inside scrollable Div
You can try to separate the header from the content: http://jsfiddle.net/u2xZU/
and put the header outside the scrollable content.
Basically, use two tables, one for the header and one for the content:
<div>Some Page Content </div>
<table>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
</tr>
</thead>
</table>
<div style="max-height: 200px; overflow: auto;">
<table id="test">
<tbody>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
</tbody>
</table>
</div>
<div>Some Page Content </div>
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>
Related Topics
Css Customized Scroll Bar in Div
Is There a CSS Parent Selector
What Does the CSS Rule "Clear: Both" Do
Why Does Minmax(0, 1Fr) Work For Long Elements While 1Fr Doesn'T
How to Select the "Last Child" With a Specific Class Name in Css
How to Style the ≪Option≫ With Only Css
How Does the CSS Block Formatting Context Work
Column Order Manipulation Using Col-Lg-Push and Col-Lg-Pull in Twitter Bootstrap 3
How to Apply Opacity to a CSS Color Variable
How to Style Icon Color, Size, and Shadow of Font Awesome Icons
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
Is There a "Previous Sibling" Selector
Css - How to Overflow from Div to Full Width of Screen
::Slotted CSS Selector For Nested Children in Shadowdom Slot
Make Flex-Grow Expand Items Based on Their Original Size
Overflow-X:Hidden Doesn't Prevent Content from Overflowing in Mobile Browsers