Question

我有一个表，其列包含两个内联div，一个显示图像，另一个显示文本，并排显示。所以每个td都是矩形的，右边是图像，左边是文本（单行）。问题（在所有浏览器中都会发生）是当我缩小水平浏览器大小，而不是保持td宽度固定并添加水平滚动条时，它正在包装文本并将其移动到图像下方，因此缩小td的宽度。无论浏览器宽度如何，如何使td宽度保持固定？哦，如果它影响它，两个div都有相对定位，这样我可以稍微调整它们在td内的位置。此外，我无法修复td的宽度，因为每个列宽度必须根据文本略有不同。感谢

<td>
  <div style="display:inline;position:relative;">
    <img src="some_image.jpg" />
  </div>
  <div style="display:inline;position:relative;">
    some short text
  </div>
</td>

Answer 1

基本上你的问题就在于“如何让td宽度保持固定......另外，我无法修复td的宽度......”：）

无论如何，我可以想到两种可能的解决方案。

如果您知道要允许的表的最大宽度，可以将其包装在具有固定宽度的div中。这样，页面的主体不会缩小到包装div的宽度，因此它不会推到你的桌子上。
在页面加载后使用javascript修复td的宽度。这样它将固定到其内容扩展到的任何宽度。您应该能够从offsetWidth属性获取td的宽度。

Answer 2

您可以将'nowrap'属性添加到td：

<td nowrap>

或用以下方式设置样式：

td {white-space:nowrap;}

TD元素包装在收缩的浏览器窗口上

2 个答案: