Имейте первый столбец в HTML-таблице, гибкой когда % таблицы width=100
У меня есть HTML-таблица с 8 столбцами и несколько строк. Содержание каждой ячейки сгенерировано динамично, и трудно предсказать ширину любого столбца. Я установил % таблицы width=100, поскольку я хотел бы, чтобы таблица подняла всю ширину отделения. Я хотел бы, чтобы столбцы 2 - 8 остались такими же как ширина, как будто я не установил таблицу width. Затем я хотел бы за первый столбец развернуть его ширину так, чтобы таблица width стала 100%. Действительно ли это возможно?
4 ответа
Установите ширину таблицы и всех остальных столбцов; оставшийся столбец займет все свободное место.
Уловка состоит в том, чтобы использовать стиль table-layout: fixed , чтобы алгоритм угадывания автоматического макета (и его особенно плохая интерпретация IE) не вмешивайтесь и портите его, когда количество содержимого в одном столбце превышает ожидаемое.
В режиме фиксированного макета первая строка ячеек или элементы задают ширину; следующие строки не влияют на ширину. Это ускоряет рендеринг; вам следует использовать фиксированный макет для каждой таблицы, которую вы можете.
<table>
<col class="name" /><col class="data" /><col class="data" /><col class="data" />
<col class="data" /><col class="data" /><col class="data" /><col class="data" />
<tr>
<td>tiddle om pom pom</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
</table>
table { width: 100%; table-layout: fixed; }
col.data { width: 2em; }
Установите явную ширину для 2–8, и ячейка 1 определит свою ширину с оставшимся пространством . Вы также можете установить no-wrap для пробелов в первой ячейке, чтобы содержимое не переносилось, а заставляло ячейку расти, когда это необходимо.
<div>
<table width="100%">
<tr>
<td width="100%"></td> <- this is col 1
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8
</tr>
</table>
</div>
установив для первой ячейки значение 100%, эта ячейка будет пытаться быть как можно более широкой, при этом сохраняя ширину остальных ячеек. Если ячейки 2–8 содержат текст, вы можете добавить, чтобы текст внутри этих ячеек не переносился из-за попытки первой ячейки иметь 100% ширину.
Я думаю, что ваш вопрос неполный, потому что если читать буквально, ответ таков: вообще не устанавливать ширину столбцов. Каждый столбец будет занимать столько места, сколько потребуется, и они будут каким-то образом распределять его между собой.
Не могли бы вы пояснить, чего бы вы хотели достичь?