在表格中设置 TD 中的 div 宽度

Posted 2023-02-26

【中文标题】在表格中设置 TD 中的 div 宽度

【英文标题】：Set div width in TD in table

【发布时间】：2012-11-21 18:41:15

【问题描述】：

我正在使用 sencha touch xTemplate。众所周知，sencha touch xtemplate 就是 html。我想在 td 中使用 div，原因如下：

使用 text-overflow:ellipsis 剪切文本。 我尝试在 中显示文本，然后文本溢出在 ios Safari 中不起作用。

我的代码是这样的：

......
......
'<td>' +
    '<div style = "overflow:hidden; text-overflow:ellipsis; width:80%; max-width: 100%;">'+  
     'Here is the text to cut'+
    '</div>'+
'</td>' +
......
......

这里有个问题： 当我将 div 放入 td 时，td 会扩展。当我将 max-width 设置为 100px 之类的数字时，它不会扩展。但我不想将宽度设置为固定数字。如何让 div 和 td 不展开？

我在这方面还是初级。所以请帮帮我！

【问题讨论】：

只分享html输出，或者使用jsfiddle

【参考方案1】：

width:80%;max-width:100% 毫无意义。如果宽度为80%，则永远无法达到您为其设置的最大值。 width 或 max-width 中的至少一个应该是绝对值，而不是百分比。

就<td> 扩展而言，您可以尝试在表格单元格上设置宽度。如果这不起作用，您还可以将table-layout:fixed 添加到表格的样式中。

【讨论】：

谢谢。我稍后会尝试表格布局。但我需要设置一个百分比值，因为该应用程序是为手机设计的。表格的宽度总是变化的。

【参考方案2】：

移除最大宽度，并尝试在td 元素上设置white-space: nowrap; css。

这对你有用吗？

http://jsfiddle.net/YeDjG/2/

【讨论】：

<td> 的 nowrap 属性在 HTML 4.01 中已弃用。请改用<td style="white-space: nowrap">

谢谢。但是当我将宽度设置为 XX% 时，该示例不起作用，这对我来说非常重要。它仅在我将宽度设置为 XX px 时才有效。稍后我会尝试在 jsfiddle 上举一个例子。

嗯，我现在无法测试 safari，但它适用于 chrome jsfiddle.net/YeDjG/3

@user1413305 : 你用什么方法？