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

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

你懂的。

其他回答

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

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

你懂的。

你可以设置右边单元格的宽度为所需宽度的最小值,然后应用overflow-hidden+text-overflow到左边单元格的内部,但是Firefox在这里有bug…

不过,flexbox似乎能帮上忙

这个问题在谷歌的顶部弹出,所以在我的例子中,我使用了css代码片段 从https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/,但应用到td没有给出预期的结果。

我不得不在td的文本周围添加一个div标签,省略号终于起作用了。

简写HTML代码;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

缩写CSS;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

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

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