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

Detecting table cell collisions on window resize

本文关键字：表单 单元格 冲突 检测 小时 调整 窗口      更新时间：2023-09-26

我正试图使用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

您不需要检查表中的每一个单元格，只需要检查最上面一行的单元格。

或者，您可以设置表格单元格的最小宽度，然后使用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技巧的文章，它展示了处理宽表数据的不同方法。

相关文章：