Процентная ширина CSS и переполнение текста в ячейке таблицы

У меня есть таблица, где ширина ячеек находится в процентах, и я хочу использовать text-overflow: ellipsis, чтобы скрыть длинные строки текста:

http://jsfiddle.net/Fm5bM/

В примере многоточие отлично работает в div, но не в ячейке. Он все еще растет и игнорирует как width:60%, так и max-width:60%.

Если я добавляю в ячейку display:block, текст останавливается на 60% и получает многоточие, но общая ширина ячейки по-прежнему является размером всего текста.

http://jsfiddle.net/Fm5bM/3/

В конечном счете, я хочу, чтобы таблица соответствовала экрану. Есть ли способ сделать это с чистым css?

Ответы

Ответ 1

Это легко сделать, используя table-layout: fixed, но "немного сложнее", потому что мало кто знает об этом свойстве CSS.

table {
  width: 100%;
  table-layout: fixed;
}

Посмотрите на действие в обновленной скрипке здесь: http://jsfiddle.net/Fm5bM/4/