我通过互联网查看了这里的问题和文章，但还没有找到满足我要求的解决方案。那么现在在2017年，是否有一种优雅的方式来拥有一个<table>：
<tbody>（滚动条可能始终可见）<thead>列和<tbody>列的混乱对齐该解决方案满足所有5个要求：
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>Chrome，FF，Edge
最简单的解决方案是使用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
懒散地支持IE11（2.5% market share截至10/2018），有点锯齿，但至少THs在顶部 - 你可以添加这个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));
});
}
将（因为IE忽略sticky位置）将使用transform translateY来定位TH元素。
PS：上面的JS（没有包装if声明）对所有其他常绿浏览器也很有效 - 如果position: sticky;不适合你的需求......
.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>这个怎么样？
<!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>
我在下面创建了一个小提琴
简答：不，不可能。
VXp的答案很有意思，但并不像你想象的那样有效。它有两个问题：
Jon的回答也是如此。
我不鼓励使用固定的表头，但是如果你真的想用你枚举的规则集（你提到的5条规则）来做这个，唯一的解决方案是使用js / jQuery。