为了在文本溢出表格单元格时剪切带有省略号的文本，您需要在每个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]-->

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

这个版本可以在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>

这对我很管用

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

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

在我的情况下，这是有效的，在Firefox和Chrome:

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

我解决这个问题使用单元格内的绝对定位div(相对)。

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

就是这样。然后你可以添加一个top:值到div或垂直居中:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

为了在右侧获得一些空间，您可以减少max-width一点。