在HTML表中，如何强制单元格文本截断，不增加单元格或换行的宽度 [英] In HTML Table how do you force cell text to truncate and not increase the width of the cell or wrap

问题描述

我尝试了一些CSS样式设置，但似乎无法使其工作，我得到文本换行或增加列的大小。

I have tried a number of CSS style settings, but can't seem to get it working, I either get the text to wrap or increase the size of the column.

我已经尝试将表格布局设置为固定

I have tried setting table-layout to fixed

table { table-layout:fixed; }

尝试过各种不同的组合。

Have tried various different combinations for the column.

Name { width: 100px; overflow:hidden; white-space:nowrap; }

推荐答案

在整个表格上设置宽度。宽度可以设置为百分比，以像素为单位，或以其他单位。您可能认为设置每列的宽度或第一行中每个单元格的宽度就足够了，但由于某些奇怪的原因，它不会。

Set a width on the entire table as well. The width can be set as a percentage, in pixels, or in other units. You might think that it suffices to set the width of each column, or the width of each cell in the first row, but for some odd reason it doesn’t.

固定的表格布局有许多怪癖和怪事，其中之一是如果内容不适合，列变宽，除非已经设置表的总宽度。这似乎是在浏览器中一致的，甚至可能认为它是规格的一部分（但它不是，就我所见）。

Fixed layout for tables has many quirks and oddities, and one of them is that if content does not fit, the column gets wider, unless the total width of the table has been set. This seems to happen so consistently in browsers that one might even think it’s part of the specs (but it isn’t, as far as I can see).

如果你想要在不设置总宽度的情况下为某些列设置固定宽度（需要截断时），我们恐怕您需要一个解决方案，例如< td>< div> ...< ; / div>< / td> 在 div 元素上设置宽度和溢出属性。

If you want to set fixed width (with truncation when needed) for some column(s) without setting the total width, I’m afraid you need a workaround like <td><div>...</div></td> with the width and overflow properties set on the div element.

这篇关于在HTML表中，如何强制单元格文本截断，不增加单元格或换行的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！