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

【问题标题】：Why can't I specify the width and height of a cell in an HTML table?为什么我不能在 HTML 表格中指定单元格的宽度和高度？
【发布时间】：2012-04-07 14:06:58
【问题描述】：

我正在使用 CSS，但为了快速测试，我只使用了内联样式。这是我要实现的代码：

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

它确保单元格的最大宽度为 10px ，但是高度会随着文本溢出，因此会变得非常大（高）。

我想要实现的是该单元格中的任何信息，我想隐藏超过 30 个字符，以便您看不到它。

（我知道 30 个字符超过 10 像素，但我只是在玩，看看它是否有效！）

【问题讨论】：

标签： php html css html-table

【解决方案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: 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/

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

如果有帮助或需要帮助，请告诉我

【讨论】：

啊好的。谢谢，我将使用 php 来限制它的大小.. 谢谢.. 这很烦人，我们不能！

【解决方案4】：

如果您将td 内容包装在div 中，它似乎可以工作：

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

【讨论】：

【解决方案5】：

html属性也应该用双引号定义，比如

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

【讨论】：

【解决方案6】：

<style type="text/css">
td {
    overflow-x: hidden;

}
</style>

【讨论】：