Столбец с переменным размером с эллипсисом в таблице

Я пытаюсь создать таблицу в 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;
}

Ответы

Ответ 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;
}

Ответ 2

Что вы просите, это небольшой динамический вкус. Я не уверен, есть ли какие-либо свойства таблицы, которые позволят вам. Мое предложение - создать вложенный тег таблицы. возьмите сначала aolumn как отдельную таблицу и другую таблицу с остальной частью. таблица родительских таблиц будет содержать свойство 100% ширины, как вам нужно.