Question

我有一张桌子，我想在td上设置固定宽度30px。问题是当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>

Answer 1

这不是最漂亮的CSS，但我让它工作：

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

有和没有省略号的例子：

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>

Answer 2

您也可以尝试使用它：

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

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

Answer 3

不仅表格单元正在增长，表本身也会增长。为避免这种情况，您可以为表分配固定宽度，反过来强制要求遵守单元格宽度：

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

（使用overflow: hidden和/或text-overflow: ellipsis是可选的，但强烈建议您提供更好的视觉体验）

因此，如果你的情况允许你为你的表分配一个固定的宽度，这个解决方案可能是其他给定答案的更好的替代方案（它可以使用或不使用固定宽度）

Answer 4

以上建议破坏了我桌子的布局，所以我最终使用了：

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

这很难维护，但比重新完成该站点的所有现有CSS更容易。希望它可以帮助别人。

Answer 5

Chrome 37。对于非固定table：

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

前两个重要！别的 - 它流走了！

Answer 6

这个解决方法对我有用......

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

Answer 7

将div置于td内，并将以下格式width:50px;overflow: hidden;添加到div中 Jsfiddle link

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

Answer 8

将td的数量除以100％。例如，你有4个td：

<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>

我们在每个td中使用25％来最大化整个表格的100％空间

CSS表td宽度 - 固定，不灵活

8 个答案: