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

【问题标题】：How to make chrome respect tables with fixed column width如何制作具有固定列宽的 chrome 尊重表
【发布时间】：2014-04-17 00:08:24
【问题描述】：

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

table-layout:fixed;

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

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

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

【问题讨论】：

【解决方案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;
}

好像是这样的。

【讨论】：