CSS Скрыть текст переполнения таблицы с разными столбцами ширины

Question

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

Например, я хочу что-то вроде этого.

|-Row 1-|-----------Row 2------------|---------Row 3 ----------|---Row 4 ---| 
|Hello..|Here is some longer text t..|You get the idea   | Blah Bla...| 

Я попытался следующие в CSS ...

.ex_table { table-layout:fixed } 
.ex_table tr td{ overflow:hidden; text-overflow: ellipsis; white-space:nowrap; } 

.ex_table .cell_1 { width:10%; } 
.ex_table .cell_2 { width:40%; } 
.ex_table .cell_3 { width:30%; } 
.ex_table .cell_4 { width:20%; } 

Но ширины игнорируются (предположительно из-за фиксированной ширины?) И отображается таблица, где каждый столбец одно и то же ширина.

Проблема решаемая

Решение выше на самом деле работает, но у меня были заголовки таблицы в моей таблице. Вам нужно установить ширину заголовков, а не клеток!

Answer 1

Если вам не нужно поддерживать старые браузеры, попробуйте принятый ответ здесь:
CSS text-overflow in a table cell?

Answer 2

может быть, вам нужно добавить фиксированную высоту? .ex_table tr td {height: 20px; переполнение: скрытый; переполнение текста: многоточие; бело-пространство: Nowrap; }

Answer 3

Добавить ширину в таблицу CSS ... Вы по существу устанавливаете ширину ячейки в процентах от nothing или auto, что вызывает проблему. Добавив ширину к таблице CSS, вы предоставите ширине ячейки четкое определение размера.

.ex_table { table-layout:fixed; width: 100%;} 
.ex_table tr td { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding: 5px; 
    border: 1px solid #aaa;} 

.ex_table .cell_1 { width:10%; } 
.ex_table .cell_2 { width:40%; } 
.ex_table .cell_3 { width:30%; } 
.ex_table .cell_4 { width:20%; } 

jsFiddle demo (тестировался только в Chrome)