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

问题描述

我有一张桌子，我想在 td 上设置 30px 的固定宽度.问题是当 td 中的文本太长时，td 被拉伸的宽度超过 30px.Overflow:hidden 在 td 上也不起作用，我需要某种方法来隐藏溢出的文本并保持 td 宽度为 30px.

I have a table and I want to set a fixed width of 30px on the td's. the problem is that when the text in the td is too long, the td is stretched out wider than 30px. Overflow:hidden doesn't work either on the td's, I need some way of hiding the overflowing text and keeping the td width 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>

推荐答案

这不是最漂亮的 CSS，但我让它起作用了:

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>

这篇关于CSS 表格 td 宽度 - 固定，不灵活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！