相关疑难解决方法(0)

CSS:截断表格单元格,但尽可能合适

认识Fred.他是一张桌子:

一个单元格具有更多内容并且更宽,另一个单元格具有更少的内容并且更窄

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

弗雷德的公寓有一个改变大小的奇怪习惯,因此他学会隐藏他的一些内容,以免推动所有其他单位,并将怀特福德夫人的客厅推到遗忘之中:

单元格现在大小相同,但只有一个单元的内容被截断,看起来如果另一个单元格给出了一些空格,它们都可以适合.

<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>
Run Code Online (Sandbox Code Playgroud)

这是有效的,但弗雷德有一种唠叨的感觉,如果他的右侧牢房(他的绰号为Celldito)放弃了一点空间,他的左侧牢房就不会在很多时候被截断.你能救他的理智吗?


总结:一个表的单元格如何均匀地溢出,并且只有当它们都放弃了所有的空白时?

html css overflow tablelayout

209
推荐指数
9
解决办法
9万
查看次数

标签 统计

css ×1

html ×1

overflow ×1

tablelayout ×1