Html <table> 带有固定的 <thead> 和可滚动的 <tbody>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47723996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 15:00:41 来源:igfitidea点击:
<table> with fixed <thead> and scrollable <tbody>
提问by Dmitry Stril
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:
我已经浏览了这里的问题和互联网上的文章，但还没有找到满足我要求的解决方案。所以现在在 2017 年，有没有一种优雅的方式来拥有一个<table>：
- be written in html+css (no js)
- have fixed header (not scrollable; not sticky)
- have scrollable
<tbody>(scrollbar may be always visible) - header and body would handle resizing properly and not mess alignment of the
<thead>columns and the<tbody>columns - would not use nested tables or separate table for header
- 用 html+css 编写（无 js）
- 有固定的标题（不可滚动；不粘）
- 具有可滚动
<tbody>（滚动条可能始终可见） - 标题和正文将正确处理调整大小，而不是
<thead>列和<tbody>列的对齐 - 不会使用嵌套表或单独的表作为标题
采纳答案by VXp
This solution fulfills all 5 requirements:
该解决方案满足所有 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>回答by Roko C. Buljan
Chrome, FF, Edge
the simplest solution is to use th { position: sticky; top: 0; }
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
To sloppily support IE11 (2.5% market shareas of 10/2018), a bit jaggy but at least THs are on top - you could add this JavaScript:
为了草率地支持 IE11（截至 2018 年 10 月，市场份额为2.5%），有点参差不齐，但至少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));
});
}
which will (since IE ignores stickyposition) use transform translateYto position the TH elements.
这将（因为 IE 忽略sticky位置）用于transform translateY定位 TH 元素。
PS:the above JS (without the wrapping ifstatement) works pretty decently for all other evergreen browsers too - in case position: sticky;does not fits your needs...
PS：上面的 JS（没有包装if语句）也适用于所有其他常绿浏览器 - 如果position: sticky;不适合您的需求......
回答by Rashami Ranjan Biswal
.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>回答by Jonathan Chaplin
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
我在下面创建了一个小提琴
回答by evilReiko
Short Answer: No, not possible.
简短回答：不，不可能。
VXp's answer is interesting but doesn't work as you might expect. It has 2 issues:
VXp 的回答很有趣，但并不像您期望的那样工作。它有2个问题：
- The table width must be set to specific fixed width, you cannot have dynamic width with this solution. That's why he set the width to 600px of the table.
- If any cell has long text, the whole layout will break (improperly aligned columns).
- 表格宽度必须设置为特定的固定宽度，此解决方案不能具有动态宽度。这就是为什么他将表格的宽度设置为 600px。
- 如果任何单元格有长文本，整个布局都会中断（列对齐不正确）。
Same thing for Jon's answer.
乔恩的回答也是如此。
I discourage using fixed table head, but if you reallywant to do this with the set of rules you enumerated (the 5 rules you mentioned), the only solution is using js/jQuery.
我不鼓励使用固定表头，但如果你真的想用你列举的规则集（你提到的 5 条规则）来做到这一点，唯一的解决方案是使用 js/jQuery。
