CSS表td宽 - 固定，不灵活 [英] CSS table td width - fixed, not flexible

问题描述

我有一个表，我想在td的固定宽度为30px。问题是当td中的文本太长时，td被拉伸超过30px。溢出：隐藏不工作在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 doesnt 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;
}

jsFiddle示例

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