缩小浏览器窗口上的 TD 元素自动换行答案

【问题标题】：TD elements word wrapping on shrinking browser window缩小浏览器窗口上的 TD 元素自动换行
【发布时间】：2010-10-15 21:25:41
【问题描述】：

我有一个表格，它的列包含两个内联 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>

【问题讨论】：

标签： html html-table

【解决方案1】：

您可以在 td 中添加 'nowrap' 属性：

<td nowrap>

或使用以下样式设置样式：

td {white-space:nowrap;}

【讨论】：

不用担心。我相信你知道 CSS 方法是首选。

【解决方案2】：

基本上你的问题就在“我怎样才能让 td 宽度保持固定......另外，我无法修复 td 的宽度，因为......”:)

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

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

【讨论】：