Does HTML 5 has a built-in fixed header table (tbody is scrollable, but thead and tfoot are fixed)?
Asked
Active
Viewed 96 times
2 Answers
1
I have found this LIVE DEMO which will do as you want. (no plugins necessary)
I haven't come across/don't think there's a built in version, and so the snippet will show you an esy implementation of what you're looking to achieve.
It has a scrollable body, with both a fixed header and footer. You also have the ability to easily manipulate it using its css.
html, body, #expandtable, #tablecontainer
{
height:100%;
margin: 0;
padding: 0;
border: none;
overflow-y: hidden;
}
#tablecontainer
{
width: 100%;
margin: 0 auto;
padding-top: 50px;
max-width: 900px;
}
#expandtable
{
margin: 5px 0 0 0px;
overflow-x: hidden;
overflow-y: scroll;
height: 60%;
border-bottom: 0;
background-color: #eee;
margin: 0 auto;
}
.breakline { clear:both;}
.divrow
{
}
.divcell { float:left; border: 1px solid #999; box-sizing: border-box; min-height: 30px; }
.colname { float:left; border: 1px solid #e5e5e5; box-sizing: border-box;}
.cellwidth1 { width:10%; }
.cellwidth2 { width:45%; }
.cellwidth3 { width:35%; }
.cellwidth4 { width:10%; }<div id="tablecontainer">
<div id="topbar">
<div class="colname cellwidth1">ABC</div>
<div class="colname cellwidth2">ABC</div>
<div class="colname cellwidth3">ABC</div>
<div class="colname cellwidth4">ABC</div>
</div>
<div class="breakline"></div>
<div id="expandtable">
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
</div>
<div class="breakline"></div>
<div id="topbar">
<div class="colname cellwidth1">ABC</div>
<div class="colname cellwidth2">ABC</div>
<div class="colname cellwidth3">ABC</div>
<div class="colname cellwidth4">ABC</div>
</div>
</div>
jbutler483
- 24,074
- 9
- 92
- 145
0
No, You will have to implement it yourself. You can use JS plugins that will do the job for you. http://www.fixedheadertable.com
see also html-table-with-fixed-headers
Community
- 1
- 1
user3063182
- 521
- 3
- 12