让TD单元格的宽度自适应指定宽度 % 的div

Question

这是我的当前HTML / CSS：http://jsfiddle.net/S8Bne/ 这里有一张截图，标注了我想尝试的内容： 基本上，我希望父级TD的宽度根据嵌套div的宽度动态包裹。这可能吗？

- keruilin

---

我不明白你的问题。只有文本可以换行，"width" 不能换行。 - RoToRa

也许我没有表达清楚。只需在单元格中键入“la”，您将看到我所指的效果。单元格宽度将会缩小。从这个：http://jsfiddle.net/S8Bne/35/ 到这个：http://jsfiddle.net/S8Bne/39/。例如，我认为您可以通过将“la la la la la la la la la”放入宽度为25％的div中来实现相同的效果。 - keruilin

你是否希望 <td> 元素“继承”其子元素的宽度？ - steveax

为什么不设置 td 的宽度：td {width:15%} - bozdoz

你需要重新考虑你想做什么。如果内容div的大小为单元格宽度的50％，然后你将单元格宽度设置为div大小，那么div现在需要缩小到一半的宽度才能保持自己的50％大小，一旦发生这种情况，单元格就需要缩小以匹配div，如此循环。因此，要么div宽度或td宽度需要基于其他东西而不是彼此。 - Sheepy

Answer 1

好的...正如Sheepy指出的那样，你所问的问题一开始似乎没有意义。但是如果你真的想让TD与内部DIV调整，你需要做一些JavaScript...

假设你有以下表格单元格：

<td rowspan="4" id="tdwrap"> <div id="divwrap">...</div></td>

您可以使用以下JavaScript调用：

// set cell width to its inner div width (in pixel)
$('#tdwrap').width($('#divwrap').width());

// set the div width back to its parent cell width (in pixel)
$('#divwrap').width($('#tdwrap').width());

然后，您可以设置 div 的宽度：

#divwrap {
    width: 30%;
}

这样，您可以让单元格宽度调整到其内部div的宽度，这取决于其父单元格的宽度！ :p 示例：http://jsfiddle.net/william/S8Bne/89/ 请注意，代码片段中使用了jQuery库。

这符合您的要求吗？

- William Niu

Answer 2

这只是一些建议，但从我的经验来看，如果您有跨浏览器测试环境，让表格和Div一起使用会很困难。

显然，尽可能只使用Div，除非是大量表格数据的情况，那么使用表格可能是合适的。您所拥有的示例似乎需要使用表格。我个人会尝试放弃表格中的div，并将CSS应用于表格单元格。

祝你好运。

- Eamonn

Answer 3

你可以尝试在 <td> 中使用 style="width: -moz-fit-content;"。

- Shalom Sam

Answer 4

请点击下方的Fiddle

http://jsfiddle.net/S8Bne/93/

<table style="table-layout: fixed;"> <tr> <td style="word-wrap:break-word">la la la la la la la la la la</td> </tr> </table>

请注意表格和单元格的style属性。

- Bharat Patil

Answer 5

我认为你可能在过度复杂化你的演示。

你可以像处理 div 一样通过JS、JQuery来处理 td（如果这是你的最终目标）。

由于看起来你需要一个表格布局：你能否只给 td 分配一个填充值，让内容自然地流动？

即使你保留 div 包装器：通过不分配宽度，div 将被绑定到单元格（其父级）的填充上。

- Dawson