我想在CSS中布局一个表.要求如下：第一列扩展尽可能多,第一列中的文本限制为一行文本,如果更多,则应该有省略号.
其他列只占用了包含文本所需的空间而没有包装(text-wrap：nowrap).
其他列只占用了包含文本所需的空间而没有包装(text-wrap：nowrap).
桌子本身宽度为100％.
我设法使用带有省略号的固定大小的第一列,或者没有省略号的可变大小的第一列,我找不到一种方法来使用带有省略号的可变大小的列.用CSS可以实现吗？如果需要,我可以使用CSS 3属性,但我想避免使用JS.
标记：
<table class="table">
<tr>
<th>First</th>
<th class="no-wrap">Second</th>
</tr>
<tr>
<td class="expand-column">
Some long long text here
</td>
<td class="no-wrap">
Other text
</td>
</tr>
</table>
CSS：
.table,.expand-column {
width: 100%;
}
.no-wrap {
white-space: nowrap;
}
解决方法
这是期望的外观：
http://jsfiddle.net/Uhz8k/？这适用于Firefox 21,Chrome 43(可能更早)和IE11.它在IE9中不起作用. (不知道IE10.)
HTML代码如下：
<table class="table">
<tr>
<th>First</th>
<th>Second</th>
</tr>
<tr>
<td class="expand-column">
Some long long text here,Some long long text here,Some long long text here.
</td>
<td class="no-wrap"> Other text here </td>
</tr>
<tr>
<td class="expand-column">
Some other long text here,Some other long text here,Some other long text here.
</td>
<td class="no-wrap"> Some other text here </td>
</tr>
</table>
和CSS：
.table {
width: 100%;
border: 1px solid grey;
}
.expand-column {
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid grey;
}
.no-wrap {
white-space: nowrap;
border: 1px solid grey;
width: 1px;
}
th {
border: 1px solid grey;
}
