宽度固定，不灵活

我有一个表，我想设置一个固定的宽度为30像素的 td 的。问题是，当 td 中的文本太长时，td 会被拉长到30px 以上。Overflow:hidden对 td 也不起作用，我需要一些方法来隐藏溢出的文本，并保持 td 宽度为30px。

<table cellpadding="0" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
356123 次浏览
小开
最佳答案

It's not the prettiest CSS, but I got this to work:

table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}

Examples, with and without ellipses: 

body {
font-size: 12px;
font-family: Tahoma, Helvetica, sans-serif;
}


table {
border: 1px solid #555;
border-width: 0 0 1px 1px;
}
table td {
border: 1px solid #555;
border-width: 1px 1px 0 0;
}


/* What you need: */
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}


table.with-ellipsis td {
text-overflow: ellipsis;
}
<table cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>


<br />


<table class="with-ellipsis" cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>

小开

you also can try to use that:

table {
table-layout:fixed;
}
table td {
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

小开

It is not only the table cell which is growing, the table itself can grow, too. To avoid this you can assign a fixed width to the table which in return forces the cell width to be respected:

table {
table-layout: fixed;
width: 120px; /* Important */
}
td {
width: 30px;
}

(Using overflow: hidden and/or text-overflow: ellipsis is optional but highly recommended for a better visual experience)

So if your situation allows you to assign a fixed width to your table, this solution might be a better alternative to the other given answers (which do work with or without a fixed width)

小开

The above suggestions trashed the layout of my table so I ended up using:

td {
min-width: 30px;
max-width: 30px;
overflow: hidden;
}

This is horrible to maintain but was easier than re-doing all the existing css for the site. Hope it helps someone else.

小开

This workaround worked for me...

<td style="white-space: normal; width:300px;">
小开

Put a div inside td and give following style width:50px;overflow: hidden; to the div
Jsfiddle link 

<td>
<div style="width:50px;overflow: hidden;">
<span>A long string more than 50px wide</span>
</div>
</td>
小开

Chrome 37. for non fixed table:

td {
width: 30px;
max-width: 30px;
overflow: hidden;
}

first two important! else - its flow away!

小开

Just divide the number of td to 100%. Example, you have 4 td's:

<html>
<table>
<tr>
<td style="width:25%">This is a text</td>
<td style="width:25%">This is some text, this is some text</td>
<td style="width:25%">This is another text, this is another text</td>
<td style="width:25%">This is the last text, this is the last text</td>
</tr>
</table>
</html>

We use 25% in each td to maximize the 100% space of the entire table


提交答案