html - 使用 CSS 冻结表头时，表头和正文未正确对齐

Question

当我尝试使用以下 css 修复其头部时，我有一个以下格式的表格，我失去了对齐，表格标题和正文没有正确对齐..我能做些什么来克服这个..

#ex_table
{

table-layout: fixed !important;
}

#ex_table thead tr
{
position: fixed !important;

}

这是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>

Answer 1

您必须严格设置单元格的宽度：

th, td { 宽度：30px }

Answer 2

将您的标题行宽度设置为表格宽度：

#ex_table thead tr
{
  width:98%;
  position: fixed !important;
}

Answer 3

答案不是那么简单，它需要大量的工作。position: fixed使用表格时无法按预期工作，因此您将需要另一种方法

这是我通过网络搜索整理的一个 JSFiddle，http://jsfiddle.net/UWS6N/1/

在 Stackoverflow 上也发现了这个，这是一个已经回答的问题，它涉及到一些问题jQuery，我个人喜欢这样做，CSS因为它更快。

当用户使用 jQuery 将表头滚动到视图之外时，表头保持固定在顶部

另外，请<th>仅为标题行保留标签，<thead>用作该特定行的容器将有助于代码可读性，将它们放在<tfoot>违反标准的情况下（我知道这个表达有点苛刻，但我是标准的倡导者和当我看到糟糕的代码时往往会变得有点前卫，那可能只是我）

Answer 4

无论用户在页面的哪个位置，固定定位都会将元素保持在视口中的同一位置。因此，如果您在 TR 上使用此属性，它们都会堆积在视口（浏览器窗口）的左上角。

Answer 5

我结合了@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; }