这对我很管用

table {
    width: 100%;
    table-layout: fixed;
}

td {
   text-overflow: ellipsis;
   white-space: nowrap;
}

这个版本可以在IE 9中运行。

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>

为了在文本溢出表格单元格时剪切带有省略号的文本，您需要在每个td类上设置max-width CSS属性以使溢出工作。不需要额外的布局div元素:

td
{
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

对于响应式布局;使用max-width CSS属性来指定列的有效最小宽度，或者只使用max-width: 0;无限的灵活性。同样，包含的表需要特定的宽度，通常为width: 100%;，列的宽度通常设置为总宽度的百分比

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

历史:对于ie9(或更少)，你需要在你的HTML中有这个，以修复特定于IE的渲染问题

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

如果你不想设置固定宽度

下面的解决方案允许您拥有较长的表单元格内容，但不能影响父表的宽度，也不能影响父行的高度。例如，你想要一个宽度为:100%的表格，但仍然对所有其他单元格应用自动调整大小的功能。在有“注释”或“评论”列的数据网格中很有用。

将这3条规则添加到你的CSS中:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

在任何你想要动态文本溢出的表格单元格中像这样格式化HTML:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

此外，对表格单元格应用所需的min-width(或根本不应用)。

当然是小提琴:https://jsfiddle.net/9wycg99v/23/

指定max-width或固定宽度并不适用于所有情况，表应该是流动的，并自动为单元格设置空间。这就是桌子的作用。适用于IE9和其他浏览器。

使用这个:http://jsfiddle.net/maruxa1j/

table { width: 100%; } .first { width: 50%; } .ellipsis { position: relative; } .ellipsis:before { content: '&nbsp;'; visibility: hidden; } .ellipsis span { position: absolute; left: 0; right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <table border="1"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> <tbody> <tr> <td class="ellipsis first"><span>This Text Overflows and is too large for its cell.</span></td> <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td> <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td> <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td> </tr> </tbody> </table>

如果你指定table-layout: fixed;在table元素上，那么td的样式应该生效。不过，这也会影响细胞的大小。

Sitepoint在这里稍微讨论了一下表格布局方法: http://reference.sitepoint.com/css/tableformatting