表中带有省略号的可变大小列答案

【问题标题】：Variable sized column with ellipsis in a table表中带有省略号的可变大小列
【发布时间】：2013-06-25 01:45:14
【问题描述】：

我正在尝试在 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;
}

【问题讨论】：

你可以为想要帮助你的人发布一些代码吗？
好的，我添加了一些代码。

标签： css layout tablelayout

【解决方案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;
}

【讨论】：

伙计，你让我对此感到非常兴奋，直到我了解到它不会在 IE9 中呈现（我的公司一直在使用它）。任何 IE 解决方案？
它可以工作，但它看起来像一个黑客......（必须写入最大宽度，但实际上被忽略了）。它会在未来的浏览器版本中继续工作吗？
它有效，但我在文本末尾看不到省略号 (...) !!!

【解决方案2】：

你要问的是小动态的味道。我不确定是否有任何表属性允许您。我的建议是创建一个嵌套表标签。将第一个 aolumn 作为单个表，将另一个表作为其余表。父表表将包含你想要的 100%width 属性。

【讨论】：