Этот вопрос задавался несколько раз, но ни один из предоставленных ответов, кажется, не помогает мне:

Смотрите это в действии здесь:http://jsfiddle.net/BlaM/bsQNj/2/

У меня есть «динамический» (в процентах) макет с двумя столбцами.

.grid {
    width: 100%;
    box-sizing: border-box;
}
.grid > * {
    box-sizing: border-box;
    margin: 0;
}
.grid .col50 {
    padding: 0 1.5%;
    float: left;
    width: 50%;
}

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

.data-table {
    width: 100%;
}
.data-table td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

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

Требования:

Должен быть в процентах. Я не могу установить абсолютные размеры.Высота каждой строки не должна превышать одну текстовую строку (что произойдет, если я уберу пробел: nowrap)Должен работать в Chrome, Firefox и Internet Explorer 8+Невозможно отобразить таблицы друг под другом, так как они должны помещаться на одном листе бумаги при печати.

Что я пробовал:

внутри и использовать ширину и переполнение на этом. Ничего не изменилось."дисплей: таблица;" на содержании div - вместо двух столбцов таблицы отображались друг под другом"макет таблицы: фиксированная;" - заставил все столбцы иметь одинаковую ширинуЯ знаю, что столбцы 2 + 3 имеют общую ширину 30%, поэтому я попытался вручную установить для столбца 1 значение 70% - ничего не изменилосьПробелы нулевой ширины по содержанию - ничего не изменилось, возможно, из-за пробелов: nowrap;

Смежные вопросы:

Ширина таблицы превышает ширину контейнераКак предотвратить растяжение моей HTML-таблицыHTML CSS Как остановить расширение ячейки таблицыСтол переполнен за пределами Div