javascript - 在窗口调整大小时检测表格单元格冲突

Question

我正在尝试使用 jQuery 来允许我在任何表格内容超过其父列在窗口调整大小之前减小表格文本的大小。我知道我可以很容易地根据其父表格单元格检查单元格内容的宽度以检测冲突，但这种方法似乎效率低下，因为这可能需要每 100 毫秒左右在 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

您不需要检查表格中的每个单元格，只需检查第一行单元格即可。

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

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

可能更好的选择是制作响应式数据表。查看这篇关于 CSS-Tricks 的文章，展示了处理宽表数据的不同方法。