这个问题已经被问了好几次，但没有一个答案似乎帮助我：
看到这里在行动：http://jsfiddle.net/BlaM/bsQNj/2/
我有一个“动态”(基于百分比)布局有两列。
.grid {
width: 100%;
Box-sizing: border-Box;
}
.grid > * {
Box-sizing: border-Box;
margin: 0;
}
.grid .col50 {
padding: 0 1.5%;
float: left;
width: 50%;
}
在每个列中，我有一个表，应该使用完整的列宽。
.data-table {
width: 100%;
}
.data-table td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
我的问题是，该表中的一些列具有需要被截断以适应表的给定宽度的内容。这不会发生，但。我得到两个彼此重叠的表。
要求：
>需要基于百分比。我不能设置绝对大小。
>每行的高度不能超过一个文本行(如果我删除white-space：nowrap会发生这种情况)
>必须在Chrome，Firefox和Internet Explorer 8中使用
>无法在下方显示表格，因为它在打印时必须适合一张纸。
我试过：
>里面的和使用宽度和溢出。没有改变。
>“display：table;”对于包含div – 而不是有两列，表被显示在彼此下面
>“table-layout：fixed;” – 强制所有列具有相同的宽度
>我知道列2 3总共有30％的宽度，所以我试图手动设置列1到70％ – 没有改变任何东西
> Zero-width spaces在内容 – 没有改变任何东西，可能是由于空白：nowrap;
相关问题：
> Table width exceeds container’s width
> How do I prevent my HTML table from stretching
> HTML CSS How to stop a table cell from expanding
> Table Overflowing Outside of Div
