Question

我正在尝试在CSS中布局表格。要求如下：第一列扩展尽可能多，第一列中的文本限制为一行文本，如果更多，则应该有省略号。其他列只占用了包含文本所需的空间而没有包装（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;
}

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;
}

Answer 2

你问的是什么是动态的味道。我不确定是否有任何表属性可以允许你。我的建议是创建一个嵌套的表标签。将第一个aolumn作为单个表，将另一个表作为其余表。父表表将包含100％宽度属性，如你所愿。

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

2 个答案: