Html 使用 CSS 冻结表头时，表头和正文未正确对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13265606/
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
Table header and body are not getting aligned properly when table header freezed using CSS
提问by Nivin Rai
I have a table of the following format when i m trying to fix its head using the following css, I m losing the alignment , the table header and body are not getting aligned properly..What can I do to overcome this..
当我尝试使用以下 css 修复其头部时，我有一个以下格式的表格，我失去了对齐，表格标题和正文没有正确对齐..我该怎么做才能克服这个问题..
#ex_table
{
table-layout: fixed !important;
}
#ex_table thead tr
{
position: fixed !important;
}
Here is the HTML part
这是 HTML 部分
<div class="table_div" style="height:400px;width:98%;overflow:scroll">
<table id="ex_table">
/*thead and tbody populated dynamically via jquery datatables*/
<tfoot id="ex_footer">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
采纳答案by Roman
You got to set width to your cells strictly:
您必须严格为单元格设置宽度：
th, td { width:30px }
th, td { 宽度：30px }
回答by Smiter
Set your thead row width as table width:
将您的标题行宽设置为表格宽度：
#ex_table thead tr
{
width:98%;
position: fixed !important;
}
回答by Hazard in Code
The answer is not that simple, it needs a lot of work. position: fixeddoes not work as expected when working with table so you will need another approach
答案并没有那么简单，需要做很多工作。position: fixed使用 table 时无法按预期工作，因此您需要另一种方法
Here is a JSFiddle I put together from a bit of searching the web, http://jsfiddle.net/UWS6N/1/
这是我在网上搜索的一些 JSFiddle，http://jsfiddle.net/UWS6N/1/
Also found this on Stackoverflow, it's a question already answered and it involves some jQuery, personally i'm a fan of doing things like this with CSSas it's faster.
在 Stackoverflow 上也发现了这个，这是一个已经回答的问题，它涉及到一些jQuery，我个人很喜欢用CSS它来做这样的事情，因为它更快。
Table header to stay fixed at the top when user scrolls it out of view with jQuery
当用户使用 jQuery 将其滚动到视图之外时，表头保持固定在顶部
Also, please reserve <th>tags only for the header row, using <thead>as a container for that specific row will help with code readability, placing them in the <tfoot>is a standards violation (a bit harsh this expression I know, but I'm a standards advocate and tend to get a bit edgy when I see bad code, that's probably just me)
另外，请<th>只为标题行保留标签，<thead>用作该特定行的容器将有助于提高代码可读性，将它们放在<tfoot>违反标准的地方（我知道这个表达有点苛刻，但我是标准倡导者和当我看到糟糕的代码时往往会变得有点急躁，这可能只是我）
回答by Nivin Rai
I combined the solution proved by @RomanTheGreat and @Smiter ,and wrote a CSS as given below...Eventhough the alignment isnt pitch prefect.This almost got me there
我结合了@RomanTheGreat 和 @Smiter 证明的解决方案，并编写了如下所示的 CSS...即使对齐不是音高级长。这几乎让我到了那里
#ex_table
{
table-layout: fixed !important;
}
#ex_table thead tr
{
width:500px !important;
position: fixed !important;
}
#ex_table tbody tr
{
width:500px!important;
}
#ex_table th, td { width:100px; }
回答by joko13
Fixed-positioning keeps an element in the same spot in the viewport no matter where on the page the user is. So if you use this property on the TRs, they all get stacked up in the top left corner of the viewport (browser window).
无论用户在页面上的哪个位置，固定定位都会将元素保持在视口中的同一位置。所以如果你在 TRs 上使用这个属性，它们都会堆积在视口（浏览器窗口）的左上角。
