如何制作具有固定列宽的 chrome 尊重表

Posted 2023-05-07

【中文标题】如何制作具有固定列宽的 chrome 尊重表

【英文标题】：How to make chrome respect tables with fixed column width

【发布时间】：2014-04-17 00:08:24

【问题描述】：

我有一个基本的自制“表格”插件，它支持水平和垂直滚动，在渲染时要固定列宽。所以我们使用CSS

table-layout:fixed;

但问题是 Chrome 似乎认为即使计算了表格宽度和列宽，它仍然应该重新格式化表格。

在这里提琴：http://jsfiddle.net/paull3876/Ssr33/

如果你在 IE 或 Firefox 中运行它没问题，数据和列标题被正确截断，但在 Chrome 中，它想要显示所有数据，所以它忽略了溢出：隐藏和设置宽度，结果是header 和 body 表之间的列不对齐。

所以，任何关于如何在 chrome 中进行这项工作的想法将不胜感激.. 谢谢

【问题讨论】：

顺便说一句，我尝试先设置表格宽度，然后再设置列宽，没有区别。 jsfiddle.net/Ssr33/13

【参考方案1】：

我仍在尝试截断 chrome，但如果您不介意行高，您可以使用此解决方法来换行：

$("td",$(".datatable")).css("white-space":"normal");

【讨论】：

谢谢。是的，这似乎使列再次排列。但是系统确实需要截断数据。当然，我可以使用 div（在每个 TD 内），但我的想法是尽可能少地使用带宽和浏览器重排，因为数据集可能非常大。不过这可能会激发更多的想法:)

【参考方案2】：

啊哈，我想我有它。

如果我将 TD 设置为 display:inline-block

.datatable .scrollingdiv td, .datatable .nonscrollingdiv td 
    overflow:hidden;
    display:inline-block;

好像是这样的。