弗雷德会面。他是一张桌子:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

弗雷德的公寓有改变大小的奇怪习惯,所以他学会了隐藏一些他的内容,这样就不会把其他所有的单元都挤过去,把惠特福德夫人的客厅挤到被遗忘的地方:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

这种方法很有效,但弗雷德有一种挥之不去的感觉,如果他的右细胞(他昵称为Celldito)让出一点空间,他的左细胞就不会经常被截断。你能挽救他的理智吗?


总之:表的单元格如何才能均匀溢出,并且只有在它们都放弃了所有空白的情况下才能溢出?


当前回答

问题在于“table-layout:fixed”,它会创建间距均匀、宽度固定的列。但是禁用这个css属性将杀死文本溢出,因为表将变得尽可能大(并且没有任何东西可以溢出)。

我很抱歉,但在这种情况下,弗雷德不能鱼与熊掌兼得。除非房东一开始就给塞尔迪托更少的工作空间,否则弗雷德就不能使用他的…

其他回答

问题在于“table-layout:fixed”,它会创建间距均匀、宽度固定的列。但是禁用这个css属性将杀死文本溢出,因为表将变得尽可能大(并且没有任何东西可以溢出)。

我很抱歉,但在这种情况下,弗雷德不能鱼与熊掌兼得。除非房东一开始就给塞尔迪托更少的工作空间,否则弗雷德就不能使用他的…

不知道这是否对任何人都有帮助,但我通过为每列指定特定的宽度大小来解决类似的问题。显然,如果每个列的内容宽度变化不太大,那么效果最好。

简单地添加以下规则到你的td:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

例子:

表 { 宽度: 100% } 道明 { 空白:无换行; } .td-truncate { 溢出:隐藏; 文本溢出:省略号; 宽度: 100%; 最大宽度: 0; } <表边框=“1”> <tr> <td>内容</td> <td class=“td-truncate”>long contenttttttttt ttt</td> <td>其他内容</td> </tr> </table>

PS: 如果你想将一个自定义宽度设置为另一个td,使用属性min-width。

使用一些css hack,似乎显示:table-column;可以来拯救:

.myTable { display: table; width: 100%; } .myTable:before { display: table-column; width: 100%; content: ''; } .flexibleCell { display: table-cell; max-width: 1px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .staticCell { white-space: nowrap; } <div class="myTable"> <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div> <div class="staticCell">Less content</div> </div>

JSFiddle: http://jsfiddle.net/blai/7u59asyp/

你可以试着“加权”某些列,像这样:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

您还可以尝试一些更有趣的调整,如使用0%宽度的列和使用一些组合的白色空间CSS属性。

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

你懂的。