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

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

我最近一直在研究它。检查这个jsFiddle测试，自己尝试改变基本表的宽度来检查行为)。

解决方案是将一个表嵌入到另一个表中:

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

Fred现在对Celldito的扩张满意吗?

就像samplebias答案一样，如果Javascript是一个可接受的答案，我专门为此目的做了一个jQuery插件:https://github.com/marcogrcr/jquery-tableoverflow

要使用插件，只需输入

$('selector').tableoverflow();

完整示例:http://jsfiddle.net/Cw7TD/3/embedded/result/

编辑:

修复了jsfiddle的IE兼容性问题。 修复jsfiddle中更好的浏览器兼容性(Chrome, Firefox, IE8+)。

简单地添加以下规则到你的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代码片段 从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; }

如果Javascript是可以接受的，我把一个快速例程放在一起，你可以作为一个起点。它动态地尝试使用跨度的内部宽度来适应单元格宽度，以响应窗口调整大小事件。

目前，它假设每个单元格通常获得行宽的50%，并且它将折叠右侧单元格以保持左侧单元格的最大宽度，以避免溢出。您可以实现更复杂的宽度平衡逻辑，这取决于您的用例。希望这能有所帮助:

我用于测试的行标记:

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

JQuery，它连接了resize事件:

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});