html – 根据可用宽度设置表格单元格的宽度

我有一个HTML表，其单元格包含跨度，如下所示：

...
<td>
    <span style="height: 20px; width: 20px; margin-left: 2px;">
    <span style="height: 20px; width: 20px; margin-left: 2px;">
    <span style="height: 20px; width: 20px; margin-left: 2px;">
</td>
...

我正在寻找一种缩小这些跨度的宽度的方法，而不是将它们包装起来，当包含表单元太窄而不能在一行上显示它们时。我尝试玩，将跨度的最大宽度设置为20px，然后使用百分比的宽度，但这不起作用，因为表单元格尝试只与其内容一样宽。

最小表格单元格宽度将是在1行显示标题所需的宽度。

对于视觉类型，当宽度足够时，这里是我目前所拥有的：

当没有足够的宽度时，这是我目前拥有的：

这就是我想要的样子，如果没有足够的宽度，每个跨度是一个完整的20px：

如果不明显，跨度是TXE，RDB和Ravennets列中的彩色方块。

解决方法

使用< td Nowrap>或< td style =“white-space：Nowrap;”>避免包装。通常情况下，表格单元可以展开以适应其内容，除非允许包装，否则您以其他方式限制了宽度。