强制表列宽度始终固定，而不管内容如何

我有一个带 table-layout: fixed的 html 表和一个带设置宽度的 td。该列仍然展开以保存不包含空格的文本的内容。除了在 div 中包装每个 td 的内容之外，还有其他解决方法吗？

例子: http://jsfiddle.net/6p9K3/29/

<table>
<tbody>
<tr>
<td style="width: 50px;">Test</td>
<td>Testing 1123455</td>
</tr><tr>
<td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td>B</td>
</tr>
</tbody>
</table>


table
{
table-layout: fixed;
}


td
{
border: 1px solid green;
overflow: hidden;
}

在这个示例中，您可以看到，尽管明确地将列宽设置为50px，但是 AAAAAAAAAAAAAAAA... 列还是扩展了。

360125 次浏览
小开

I would try setting it to:

max-width: 50px;
小开

Make the table rock solid BEFORE the css. Figure your width of the table, then use a 'controlling' row whereby each td has an explicit width, all of which add up to the width in the table tag.

Having to do hundreds html emails to work everywhere, using the correct HTML first, then styling w/css will work around many issues in all IE's, webkit's and mozillas.

so:

<table width="300" cellspacing="0" cellpadding="0">
<tr>
<td width="50"></td>
<td width="100"></td>
<td width="150"></td>
</tr>
<tr>
<td>your stuff</td>
<td>your stuff</td>
<td>your stuff</td>
</tr>
</table>

Will keep a table at 300px wide. Watch images that are larger than the width by extremes

小开

Try looking into the following CSS: 

word-wrap:break-word;

Web browsers should not break-up "words" by default so what you are experiencing is normal behaviour of a browser. However you can override this with the word-wrap CSS directive.

You would need to set a width on the overall table then a width on the columns. "width:100%;" should also be OK depending on your requirements.

Using word-wrap may not be what you want however it is useful for showing all of the data without deforming the layout.

小开

You can add a div to the td, then style that. It should work as you expected.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Then the css.

td div { width: 50px; overflow: hidden; }
小开
最佳答案

Specify the width of the table:

table
{
table-layout: fixed;
width: 100px;
}

See jsFiddle

小开

You can also work with "overflow: hidden" or "overflow-x: hidden" (for just the width). This requires a defined width (and/or height?) and maybe a "display: block" as well.

"Overflow:Hidden" hides the whole content, which does not fit into the defined box.

Example:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
<tr>
<td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
<td>bbb</td>
<td>cccc</td>
</tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

EDIT: Shame on me, I've seen, you already use "overflow". I guess it doesn't work, because you don't set "display: block" to your element ...

小开

You can also use percentages, and/or specify in the column headers:

<table width="300">
<tr>
<th width="20%">Column 1</th>
<th width="20%">Column 2</th>
<th width="20%">Column 3</th>
<th width="20%">Column 4</th>
<th width="20%">Column 5</th>
</tr>
<tr>
<!--- row data -->
</tr>
</table>

The bonus with percentages is lower code maintenance: you can change your table width without having to re-specify the column widths.

Caveat: It is my understanding that table width specified in pixels isn't supported in HTML 5; you need to use CSS instead.

小开

This works for me

td::after {
content: '';
display: block;
width: 30px;
}

提交答案