Login/Register
<table> with fixed <thead> and scrollable <tbody> [duplicate]
Asked Answered
Solved htmlcsshtml-tablescrollbarfixed-header-tables
T

5

38

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:

  1. be written in html+css (no js)
  2. have fixed header (not scrollable; not sticky)
  3. have scrollable <tbody> (scrollbar may be always visible)
  4. header and body would handle resizing properly and not mess alignment of the <thead> columns and the <tbody> columns
  5. would not use nested tables or separate table for header
Territorialism answered 9/12, 2017 at 0:21 Comment(0)
J
41

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>
Jerroldjerroll answered 9/12, 2017 at 20:46 Comment(2)
This is not proper. if you put the auto instead of scroll then your tbody will vary and it will be not aligned properly if we remove half of the body content. – Preparatory
Magic numbers again – Antagonist
I
45

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>

IE11

To sloppily support IE11 (2.5% market share as of 10/2018), a bit jaggy but at least THs are on top - you could add this JavaScript:

function isIE() {
  return navigator.userAgent.indexOf('MSIE') > -1 || navigator.appVersion.indexOf('Trident/') > -1
}


if (isIE()) {

  // Fix table head
  function tableFixHead(ths) {
    var sT = this.scrollTop;
    [].forEach.call(ths, function(th) {
      th.style.transform = "translateY(" + sT + "px)";
    });
  }

  [].forEach.call(document.querySelectorAll(".tableFixHead"), function(el) {
    var ths = el.querySelectorAll("thead th");
    el.addEventListener("scroll", tableFixHead.bind(el, ths));
  });

}

which will (since IE ignores sticky position) use transform translateY to position the TH elements.

PS: the above JS (without the wrapping if statement) works pretty decently for all other evergreen browsers too - in case position: sticky; does not fits your needs...

Ilse answered 22/10, 2018 at 11:18 Comment(3)
This solution with translateY has some issues with z-index. When you are using translateY you are creating a new context from the table itself. You can read more here: stackoverflow.com/a/25798522. Anyway, thanks! :-) – Terceira
@Tomeu I know about that. Can you just share in which context it does not work for you? You're using z-index to...? And on which elements? – Ilse
I have an issue with th in the thead in the table. I have a table with top caption, I want my caption and th to be sticky when the table is scrolled. I have given th top: 46px which is the height of caption. It works in chrome but not in safari. In safari the` th` are shifted down a few pixels on page load. If I give top: 0 to th it works in safari but then on scroll in chrome the th overlaps caption. – Enwrap
J
41

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>
Jerroldjerroll answered 9/12, 2017 at 20:46 Comment(2)
This is not proper. if you put the auto instead of scroll then your tbody will vary and it will be not aligned properly if we remove half of the body content. – Preparatory
Magic numbers again – Antagonist
P
11

.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>
Pahari answered 16/8, 2018 at 15:50 Comment(1)
OP did mention no sticky, you should read the requirement better & at least explain what are you trying to show OP? – Pitiable
N
2

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/

Nonfeasance answered 9/12, 2017 at 15:38 Comment(1)
Works fine for headers of same length. See on your example: jsfiddle.net/o099f5h5 – Territorialism
G
-6

Short Answer: No, not possible.

VXp's answer is interesting but doesn't work as you might expect. It has 2 issues:

  1. 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.
  2. 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.

Gawky answered 10/12, 2017 at 14:11 Comment(2)
@DmitryStril If you're satisfied with that, go for it. But it's incorrect even if it looks valid. You may get different layout in each browser because the code is not following the standards. In a proper table, if you change the width of a cell, the entire column get the same width, but in your example, each row is behaving separately. Anyway, if you're going with this solution, you may would like to try to add border-collapse: collapse; to your <table> which you may like the result – Gawky
1. Table is dynamic. 2. Layout doesn't break. Short answer: It's possible. – Jerroldjerroll

© 2022 - 2024 — McMap. All rights reserved.