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

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更容易.希望它可以帮助别人.