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

前端之家收集整理的这篇文章主要介绍了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;”>避免包装。通常情况下,表格单元可以展开以适应其内容,除非允许包装,否则您以其他方式限制了宽度。
原文链接:https://www.f2er.com/html/232788.html

猜你在找的HTML相关文章