在窗口调整大小时检测表格单元格碰撞

Question

我正在尝试使用jQuery允许我在任何表内容超过窗口大小调整时其父列的内容之前减小表文本的大小。我知道我可以轻松地检查单元格内容相对于其父表单元格的宽度以检测冲突，但是这种方法似乎效率低下，因为这可能需要在用户调整大小时每隔100ms左右在1000个表格单元格中完成。

有没有人有更有效的方法？

下面的伪代码：

On resize (throttled)
    If any table content has less than 10px until it exceeds the width of its containing column
        Do stuff

Answer 1

您不需要检查表格中的每个单元格，只需检查单元格的顶行。

或者，您可以设置表格单元格的最小宽度，然后使用css3 text-overflow: ellipsis

table {
    table-layout: fixed;
}
td {
    border: 1px solid black;
    min-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

可能更好的选择是制作响应式数据表。查看关于CSS-Tricks的this article，其中显示了处理宽表数据的不同方法。