Variable sized column with ellipsis in a table

问题

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).

The table itself is 100% width.

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.

Markup:

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

回答1:

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.)

The html code is below:

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

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

回答2:

What are you asking is little dynamic flavour. Iam not sure if there is any table properties that will allow you. My sugg is create a nested table tag. take first aolumn as single table and another table with rest of it. the parent table table will contain 100%width property as u want.

来源：https://stackoverflow.com/questions/17345158/variable-sized-column-with-ellipsis-in-a-table

标签

css

css3

layout

tablelayout