Закрепить таблицы HTML, чтобы не превышать их размер контейнеров

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

См. здесь в действии: 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 +
Невозможно отобразить таблицы ниже друг друга, так как при печати необходимо разместить их на одном листе бумаги.

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

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

Вопросы, относящиеся:

Ответ 1

вам нужно добавить свойство table-layout:

table-layout: fixed;

также включают width = 100% в HTML-теге таблицы, а не только тег стиля.

http://jsfiddle.net/reeK5/

Ответ 2

Возможно, вас будет интересовать найденный max-width: 0; хак.

Он имеет некоторые ограничения, мы должны использовать таблицы CSS вместо HTML, но он работает:

.leftBlock
{
    width: 100%;
    max-width: 0;
    word-wrap: break-word;
    overflow: hidden;
}

.rightBlock
{
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

http://jsfiddle.net/CyberAP/NUHTk/103/

Ответ 3

Измерения на таблицах работают по-разному. В общем случае ширина ячейки таблицы обрабатывается как минимальная ширина.

Одно решение, если вы не возражаете добавить дополнительную разметку, заключается в размещении div внутри каждой ячейки таблицы, в которую вы помещаете контент. Затем дайте этому div ширину или максимальную ширину. Так

<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>

становится

<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>

и т.д.

См. обновленную скрипту: http://jsfiddle.net/bsQNj/4/

Изменить: я вижу, что скрипка нуждается в некоторой работе - я забыл поставить некоторые divs там, где они были необходимы. Но я надеюсь, что вы сможете работать с этой идеей.

Ответ 4

.div {
  width:300px;
  border:1px solid;
}
.breaked {
  word-break: break-all;
}
table{
  border:1px solid red;
}
td {
  border:1px solid green;
}

<div class="div">
<table>
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
  <br /><hr/><br />
  <table class="breaked">
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
</div>

Ответ 5

В вашем CSS:

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

Это должно охватывать все таблицы