如何截断表格单元格，但尽可能多地容纳内容? [英] How can I truncate table cells, but fit as much as content possible?

问题描述

认识弗雷德.他是一张桌子:

Meet Fred. He's a table:

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

Fred 的公寓有一个奇怪的改变大小的习惯，所以他学会了隐藏他的一些内容，以免将所有其他单元推倒并将 Whitford 夫人的客厅推入遗忘:

Fred's apartment has a bizarre habit of changing size, so he's learned to hide some of his content so as not to push all the other units over and shove Mrs. Whitford's living room off into oblivion:

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

这行得通，但 Fred 有一种唠叨的感觉，如果他的右侧单元格(他的昵称 Celldito)放弃一点空间，他的左侧单元格不会在很多时候被截断.你能挽救他的理智吗?

This works, but Fred has a nagging feeling that if his right cell (which he's nicknamed Celldito) gave up a little space, his left cell wouldn't be truncated quite as much of the time. Can you save his sanity?

总而言之:表格的单元格如何均匀溢出，并且只有当它们全部放弃所有空白时?

In summary: How can a table's cells overflow evenly, and only when they've all given up all their whitespace?

推荐答案

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

http://jsfiddle.net/7CURQ/

这篇关于如何截断表格单元格，但尽可能多地容纳内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！