可变大小的列,表中包含省略号

Question

我想在CSS中布局一个表.要求如下:第一列扩展为多,因为它可以和第一列文本被限制为一行文本,如果有更多的,应该有一个省略号.其他列只需要他们需要包含他们的文本不换行(文本换行: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;
}

Answer 1

这是想要的外观: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,
            Some long long text here, Some long long text here, Some long long text here,
            Some long long text here, Some long long text here, Some long long text here,
            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,
            Some other long text here, Some other long text here, Some other long text here,
            Some other long text here, Some other long text here, Some other long text here,
            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;
}