Dmitry Stril
Reputation: 1465
<table> with fixed <thead> and scrollable <tbody>
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:
- be written in html+css (no js)
- have fixed header (not scrollable; not sticky)
- have scrollable
<tbody>(scrollbar may be always visible) - header and body would handle resizing properly and not mess alignment of the
<thead>columns and the<tbody>columns - would not use nested tables or separate table for header
Upvotes: 39
Views: 123515
Answers (5)
Roko C. Buljan
Reputation: 206111
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>Upvotes: 47
VXp
Reputation: 12068
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>Upvotes: 43
Rashami Ranjan Biswal
Reputation: 166
.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>Upvotes: 11
evilReiko
Reputation: 20473
Short Answer: No, not possible.
VXp's answer is interesting but doesn't work as you might expect. It has 2 issues:
- 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.
- 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.
Upvotes: -6
Jonathan Chaplin
Reputation: 2482
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/
Upvotes: 2
Related Questions
- Can we have multiple <tbody> in same <table>?
- How do I create an HTML table with a fixed/frozen left column and a scrollable body?
- Table fixed header and scrollable body
- thead and tbody doesnt fit
- Fixed Thead; Scrollable Tbody ~ Righter Columns Less Aligned
- Can't align thead and tbody in scrollable table
- Fixed header scrollable table has mismatch between header and tbody