php - 为什么我不能在 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;'>";

但是，这并不能解决问题。我阅读 spec 的方式，只允许固定布局表在溢出时裁剪其内容(相对于调整大小以适应它)。

更好/更简单的方法是使用 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 来实现漂亮的椭圆效果:省略号。这不需要用 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>

这个 fiddle 具有我刚刚描述的所有技术:http://jsfiddle.net/Aa4JL/4/