4

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

2 回答 2

8

这是想要的样子吗：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;
}
于 2013-06-28T14:53:15.607 回答
0

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

于 2013-06-27T14:03:16.237 回答