表中带有省略号的可变大小的列 [英] Variable sized column with ellipsis in a table

问题描述

我想在CSS中布局表格。要求如下：第一列扩展尽可能多，第一列中的文本限制为一行文本，如果更多，应该有省略号。
其他列只需要它们需要的空间来包含它们中的文本而不用换行（text-wrap：nowrap）。

I am trying to layout a table in CSS. The requirements are as follow: the first column expands as much as it can, and text in the first column is limited to one line of text, if more, there should be an ellipsis. The other columns take only the space they need to contain the text in them without wrapping (text-wrap: nowrap).

表本身是100％宽度。

The table itself is 100% width.

我设法有一个固定大小的第一列与省略号，或一个可变大小的第一列没有省略号，我找不到一个方法有一个可变大小的列与省略号。它是可以实现的CSS？我可以使用CSS 3属性，但是我想避免使用JS。

I managed to have either a fixed size first column with ellipsis, or a variable size first column with no ellipsis, I can't find a way to have a variable sized columns with ellipsis. Is it achievable with CSS? I can use CSS 3 properties if required, but I would like to avoid the use of 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。）

Is this the desired look: http://jsfiddle.net/Uhz8k/ ? This works in Firefox 21+, Chrome 43+ (probably earlier), and IE11. It doesn't work in IE9. (Don't know about 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;
}

这篇关于表中带有省略号的可变大小的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！