html - 根据可用宽度设置表格单元格内容的宽度

Question

我有一个 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>
...

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

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

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

当宽度不够时，这是我目前拥有的:

当每个跨度的宽度不足以达到完整的 20 像素时，我希望它看起来像这样:

如果不明显，跨度是 TXEs、RDBs 和 RavenNets 列中的彩色方 block 。

Answer 1

使用 <td nowrap>或 <td style="white-space:nowrap;">以避免包装。表格单元格通常应展开以适合其内容，除非允许它换行，或者您已通过其他方式限制其宽度。