Таблица CSS с одним столбцом, занимающим оставшееся пространство

Я попробовал теперь несколько вещей (и осмотрел здесь), и пока ничего не работало. Поэтому я собираюсь спросить.

Что я хочу:

У меня есть следующий простой HTML:

<table>
  <tr>
    <td class="small">First column with text</td>
    <td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
    <td class="small">Small column</td>
  </tr>
</table>

Сама таблица должна быть 100% ширины родительского контейнера. Я хочу, чтобы первый и последний столбцы (.small) были такими же большими, какими они должны быть, поэтому контент может вписаться в него без разрыва строки (так что это то, что делает white-space: nowrap). Средний столбец (.extend) должен занимать остальную часть пространства (так что таблица будет находиться в пределах 100% ширины его родительского контейнера), а текст внутри .extend должен быть эллипсирован, прежде чем ему нужно сломаться до строки секунд.

Я подготовил скрипку для этого на http://jsfiddle.net/3bumk/

С этими цветами фона я ожидаю результат вроде:

Есть ли какое-либо решение для этого?

Что я получаю:

Моя проблема в том, что если я могу заставить текст оставаться в одной строке (без разрывов строк), таблица всегда будет переполнять свою родительскую ширину контейнера (и заставить ее прокручивать), прежде чем идея будет иметь многоточие текст в среднем столбце.

Что не является решением (я часто нахожу):

Нет решения установить первый и третий столбцы на "фиксированный" с (процентом или пикселем), поскольку время от времени содержимое будет иметь разную длину. Можно добавить столько div или span по мере необходимости (или избавиться от всей таблицы - то, что я пробовал первым, с display и table, но я не нашел рабочего решения таким образом либо).

PS: Было бы очень приятно, если бы вы могли отредактировать скрипту в рабочем примере, если вы знаете один: -)

EDIT Я также могу использовать divs вместо таблицы!

Ответы

Ответ 1

Вот ответ с использованием divs вместо таблицы: DEMO

HTML

<div class="container">
    <div class="fnl first">First Baby</div>
    <div class="fnl last">Last Guy</div>
    <div class="adjust">I will adjust between both of you guys</div>
</div>

CSS

.container{
    width: 300px;
}
.first{
    float:left;
    background: red;
}
.last{
    float:right;
    background: orange;
}
.adjust{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Ответ 2

Что-то вроде этого? http://jsfiddle.net/NhGsf/

Используя display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;

И установка первого и последнего дочерних элементов на фиксированную ширину, средняя часть будет содержать остальную часть пространства

Ответ 3

Смотрите эту скрипту (или альтернативно), вам нужно установить max-width для каждой ячейки таблицы:

body{
    width:100%;
    padding:0;
    margin:0;
}
table {
    margin-top: 50px;
    width:100%;
    max-width:100%;
}
table td {
    white-space: nowrap;
}
table td:nth-child(1) {
    background-color:red;
    max-width:100px;
}
table td:nth-child(2) {
    background-color: green;
    overflow:hidden;
    max-width:100px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table td:nth-child(3) {
    background-color: orange;
    max-width:100px;
}

Ответ 4

Вы можете переупорядочить столбцы, перемещая самый длинный в конце, затем используйте вложенные таблицы.

CSS

.extend
{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}
td
{
    white-space:nowrap;
}
.box
{
    width:1000px;
    border:blue solid thick;
    overflow:hidden;
}

HTML

<div class="box">
<table width="100%" border="1">
  <tr>
    <td class="small">First column with text</td>
     <td class="small">Small column</td>
     <td>
<table>
     <tr>
    <td  class="extend" >This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long.</td>
    </tr>
    </table>
   </td>
  </tr>
</table>
</div>

За исключением многоточия, он работает хорошо. См. результат

Ответ 5

min-width в сочетании с шириной: 100%, похоже, работает в firefox и chrome:

  tr {
    td:first-of-type {
      width: 100%;
    }
    td:last-of-type {
      min-width: 200px;
    }
  }

Ответ 6

У меня возникла такая же проблема, и я нашел следующее решение, используя таблицы.

HTML должен использовать DIV в длинном столбце. CSS определяет ваши малые и расширенные классы. Трудная часть - это определение класса расширения.

Это дает вам описание поведения.

HTML

<table>
  <tr>
    <td class="small">First column with text</td>
    <td class="extend">
      <div class="small">This column should fill the remaining space but should be truncated if the text is too long.</div>
    </td>
    <td class="small">Small column</td>
  </tr>
</table>

CSS

table {
  margin-top: 50px;
}

table td {
  white-space: nowrap;
}

table td:nth-child(1) {
  background-color: red;
}

table td:nth-child(2) {
  background-color: green;
}

table td:nth-child(3) {
  background-color: orange;
}

.extend {
  display: table;
  table-layout: fixed;
  width: 100%
}

.small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}