Первый столбец в HTML-таблице должен быть гибким, когда ширина таблицы = 100%

Question

У меня есть HTML-таблица с 8 столбцами и несколькими строками. Содержимое каждой ячейки генерируется динамически, и трудно предсказать ширину любого столбца. Я установил ширину таблицы = 100%, так как хотел бы, чтобы таблица занимала всю ширину div. Я бы хотел, чтобы столбцы со 2 по 8 оставались такими же, как ширина, как если бы я не устанавливал ширину таблицы Тогда я бы хотел, чтобы первый столбец расширил свою ширину, чтобы ширина таблицы стала 100%. Возможно ли это?

Answer 1

Установить ширину таблицы и всех остальных столбцов; оставшаяся колонна займет все провисание.

Хитрость заключается в том, чтобы использовать стиль table-layout: fixed, чтобы алгоритм угадывания автоматического макета (и особенно плохая его интерпретация IE) не вмешивался и не испортил его, когда в одном столбце содержится больше, чем ожидалось .

В режиме фиксированной разметки первый ряд ячеек или <col> элементов устанавливает ширину; последующие строки не влияют на ширину. Это делает рендеринг быстрее; Вы должны использовать фиксированную раскладку для каждой таблицы, которую можете.

<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; }

Answer 2

<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%.

Answer 3

Установите явную ширину для 2 - 8, и ячейка 1 определит свою ширину с оставшимся пространством. Вы также можете установить запрет на перенос в первой ячейке, чтобы содержимое не было перенесено, но заставило ячейку расти при необходимости.

Answer 4

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

Можете ли вы уточнить, чего бы вы хотели достичь?