35

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
VXp
  • 11,598
  • 6
  • 31
  • 46
Dmitry Stril
  • 1,385
  • 4
  • 16
  • 34

5 Answers5

44

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

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 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: https://stackoverflow.com/a/25798522. Anyway, thanks! :-) – Tomeu Cabot Jan 25 '19 at 16:04
  • @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? – Roko C. Buljan Jan 25 '19 at 16:40
  • 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`. – Sushmit Sagar Nov 28 '19 at 08:27
39

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>
VXp
  • 11,598
  • 6
  • 31
  • 46
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>
Rashami Ranjan Biswal
  • 166
  • 1
  • 5
  • OP did mention no `sticky`, you should read the requirement better & at least explain what are you trying to show OP? – Toan Lu Aug 16 '18 at 15:58
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/

Jonathan Chaplin
  • 2,442
  • 1
  • 18
  • 21
-5

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.

evilReiko
  • 19,501
  • 24
  • 86
  • 102
  • @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 `