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

I am using CSS, but for the sake of quick testing I'm just using an inline style. This is the code I am trying to implement:

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

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

it makes sure that the max width of the cell is 10px , however the height overflows with the text so and it get very large (high).

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

what I am trying to achieve is any information that is in that cell more than 30 characters I want to hide so you can't see it.

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

(I know 30 characters is more than 10px but I am just playing to see if it worked!)

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

6 个解决方案

#1

Your syntax is wrong:

你的语法错了：

Bad

坏

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

Good

好

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

However, this doesn't fix the problem. The way I read the spec, only fixed layout tables are allowed to clip their content on overflow (versus resizing to accommodate it).

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

A better/simpler way would be to use a DIV.

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

See this example: http://jsfiddle.net/Aa4JL/

看到这个例子：http：//jsfiddle.net/Aa4JL/

However, if your data is tabular and you need to use a table, you can achieve the same effect by wrapping the cell's contents in a DIV.

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

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

Note that if you don't care about clipping based on height you can achieve a nice ellipses effect using fixed layout tables combined with white-space: nowrap combined with text-overflow: ellipsis. This does not require wrapping the content with a DIV. Note that the ellipsis effect will only work in newer browsers (content should still be clipped in older browsers).

请注意，如果您不关心基于高度的剪裁，您可以使用固定布局表结合白色空间来实现漂亮的椭圆效果：nowrap结合文本溢出：省略号。这不需要使用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>

This fiddle has all the techniques I've just described: http://jsfiddle.net/Aa4JL/4/

这个小提琴有我刚刚描述的所有技巧：http：//jsfiddle.net/Aa4JL/4/

#2

You can use text-overflow. This is an example of using text-overflow:ellipsis. I created an example on jsfiddle by just copying the code from said example.

您可以使用文本溢出。这是使用文本溢出的示例：省略号。我通过复制上述示例中的代码在jsfiddle上创建了一个示例。

#3

i think you cant do it.. html only define the base size of the cell which means what size will the cell be if you dont have any text. if your text is larger then the cell it wont stop it.

我认为你不能这样做.. html只定义单元格的基本大小，这意味着如果你没有任何文本，单元格的大小。如果您的文字较大，那么它不会阻止它。

a better way to do what you're trying to do is to use php and the substring() function..

一个更好的方法来做你想要做的是使用PHP和substring（）函数..

let me know if it helps or if you need help with that

让我知道它是否有帮助，或者如果您需要帮助

#4

It seems to work if you wrap the td contents in a div:

如果你将td内容包装在div中似乎有效：

Demo: http://jsfiddle.net/LUmNc/

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

#5

the html attributes should also be defined in double quotes, such as

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

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

#6

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

}
</style>

#1