如何截断表格单元格，但尽可能适合内容？

Question

这是弗雷德。他是一张桌子

​

​

<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)放弃一点空间，他的左细胞将不会被截断相当多的时间。你能拯救他的理智吗？

概括地说:一个表的单元格如何才能均匀溢出，并且只有当它们都放弃了所有的空白时？

Answer 1

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

Answer 2

我相信我有一个非JavaScript的解决方案！我不想满足于JavaScript的修复，因为我发现页面加载后移动的东西的轻微抖动是不可接受的。

特性

• 无JavaScript
• 无固定布局
• 没有加权或百分比宽度的技巧。
• 适用于任意数量的列。
• 简单的服务器端生成和客户端更新(无需计算)
• 跨浏览器兼容

如何工作：在表单元格中，将内容的两个副本放在一个相对定位的容器元素中的两个不同元素中。间隔单元是静态定位的，因此将影响表单元格的宽度。通过允许间隔单元格的内容包装，我们可以得到我们正在寻找的表格单元格的“最佳匹配”宽度。这还允许我们使用绝对定位元素将可见内容的宽度限制为相对定位的父元素的宽度。

测试和工作: IE8，IE9，IE10，Chrome，Firefox，Safari，Opera

结果图像

​

​

JSFiddle：http://jsfiddle.net/zAeA2/

示例/CSS

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

Answer 3

只需将以下规则添加到td中

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

示例：

​

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

<table border="1">
  <tr>
    <td>content</td>
    <td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
    <td>other content</td>
  </tr>
</table>

​

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