带有粘性标题的 HTML 表格 - 单元格宽度问题

Question

我正在使用一个带有粘性标题的 html 表格，在 css 中我使用

设置单元格宽度

th, td { width:110px }

这在屏幕全宽时有效，但是当屏幕\框架小于 100% 或表格对于窗口而言太大时，表格标题和详细信息行会不对齐。

这是文件的完整css

table tbody, table thead
{
display: block;
/*display: table-header-group;*/
table-layout: fixed;
}
table tbody  
{
overflow: auto;
height: 300px;
}
th, td { width:110px }
.colSelector tbody td:nth-child(1) {
width: 260px; 
}
.statusSelector tbody td:nth-child(1) {
width: 200px;
}
.statusSelector{ height: 150px;}

statusSelector 和 colSelector 呈现良好，因为它们是由 asp.net 生成的单个表格列，因此永远不会大于页面或框架。

如果有人可以帮助我解决这个对齐问题，我将不胜感激，因为由于这个问题，粘性 header 似乎不容易处理。

我创建了一个 fiddle的问题。

Answer 1

好吧，你可以添加:

table{
    width: 2200px;
}

或

table{
    min-width: 2200px;
}

;) 那是 20 列，每列 110px。我更喜欢第一个。