为什么可以';t我指定HTML表中单元格的宽度和高度


Why can't I specify the width and height of a cell in an HTML table?

我使用CSS,但为了快速测试,我只是使用内联样式。这是我试图实现的代码:

echo "<td style='height=10px; width=10px;'>";

它确保单元格的最大宽度是10px,但是高度溢出了文本,所以它变得非常大(高)。

我试图实现的是任何信息,在这个单元格超过30个字符,我想隐藏,这样你就看不到了。

(我知道30个字符超过10px,但我只是想看看它是否有效!)

您的语法错误:

错误的

echo "<td style='height=10px; width=10px;'>";

良好

echo "<td style='height:10px; width:10px;'>";

然而,这并不能解决问题。按照我阅读规范的方式,只有固定布局的表才允许在溢出时剪裁其内容(而不是调整大小以适应它)。

更好/更简单的方法是使用DIV

请参见此示例:http://jsfiddle.net/Aa4JL/

但是,如果数据是表格格式的,并且需要使用表,则可以通过将单元格的内容包装在DIV中来实现相同的效果。

<table>
    <tr>
     <td><div style='height:10px; width:10px; overflow: hidden;'>This text is clipped.</div></td>         
    </tr>
</table>​

请注意,如果您不关心基于高度的剪裁,则可以使用固定布局表与white-space: nowraptext-overflow: ellipsis相结合来实现良好的椭圆效果。这不需要用DIV包装内容。请注意,省略号效果只适用于较新的浏览器(内容仍应在较旧的浏览器中剪裁)。

<table style="table-layout:fixed;width:50px;">
    <tr>
     <td style='width:50px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;'>Long string of text with nice ellipses effect.</td>         
    </tr>
</table>

这把小提琴拥有我刚才描述的所有技术:http://jsfiddle.net/Aa4JL/4/

您可以使用文本溢出。这是使用text-overflow:ellipsis的一个示例。我在jsfiddle上创建了一个示例,只是复制了上面示例中的代码。

我认为你做不到。。html只定义单元格的基本大小,这意味着如果没有任何文本,单元格的大小是多少。如果你的文本比单元格大,它不会停止它。

一个更好的方法是使用php和substring()函数。。

让我知道它是否有帮助,或者你是否需要帮助

如果将td内容包装在div:中,则似乎可以工作

演示:http://jsfiddle.net/LUmNc/

html属性也应该用双引号定义,例如

echo "<td style='"height:10px; width:10px;'">";
<style type="text/css">
td {
    overflow-x: hidden;
}
</style>