为什么我不能在HTML表格中指定单元格的宽度和高度？

Question

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

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

它确保单元格的最大宽度为10px,但高度随文本溢出而变得非常大(高).

我想要实现的是该单元格中的任何信息超过30个我想隐藏的字符,所以你看不到它.

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

Answer 1

你的语法错了:

坏

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

好

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

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

更好/更简单的方法是使用a 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: nowrap联合text-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/