我在这里有以下表格示例：http://jsfiddle.net/Lu9y3/
这基于此处的Telerik示例：http://demos.telerik.com/aspnet-mvc/Grid/Paging?theme=vista这是我正在构建的应用中使用的UI组件。
如您所见，他们使用两个单独的表来实现固定标题和可滚动内容。但两个表格中的标题和列仍然正确排列。
即使我删除来自使用Web Inspector的Telerik示例中<col>的样式，列仍然会排列......而且它们不使用jQuery调整宽度。那么为什么他们的栏目排成一列而我的列呢？
他们是怎么做到的？
答案 0 :(得分：3)
您遇到问题的原因是您使用两个单独的表。表格将列宽调整为最长的不间断内容。 Telerik的工作方式，它们有四列，并且除了第三列以外的所有列都明确设置了宽度。这允许第三列扩展并填充剩余空间。
使用table-layout:fixed会有所帮助，但无论内容如何，它都会使所有列均匀分布。我建议设置每列的width，或者更好地为每个宽度设置class，并在相应的列上重复使用。
我不在我的例子中使用类，但我认为你明白了。我在overflow:hidden和th上使用td来确保较长的内容不会显示在表格的其他单元格上。我也认为表格的视觉效果效果更好，列数较少，列数为7或8列可能有点矫枉过正，但这是我个人的看法。
答案 1 :(得分：1)
使用table-layout: fixed;使表格对齐;）
答案 2 :(得分：0)
我正在使用谷歌浏览器，当我打开编辑器（F12）到Telerik的网站并更改设置时，他们开始没有排队。我已经完成了一些研究，根据W3.org on <col>，看起来没有办法在全球范围内命名一个<col>可以在多个方法中使用（遗憾的是）。
此外，在Telerik的示例中，似乎<col>定义指定了标签本身的宽度（可能通过某些JS手动放置）。我认为这是除了设置特定CSS规则之外的唯一方法，但这可能不如更动态的解决方案。
祝你好运！