Трехколонный макет таблицы HTML с основным столбцом

Question

У меня есть таблица из 3 столбцов с основным содержимым, отображаемым в середине содержимого. Ширина всех трех столбцов является гибкой, но ширина среднего столбца должна иметь приоритет.
Есть ли способ сделать это?

Answer 1

<table>
    <tr>
        <td id="left">Some content</td>
        <td id="center">Center content</td>
        <td id="right">Right content</td>
    </tr>
    <tr>
        <td style="white-space: nowrap">Some content</td>
        <td style="width:90%">Center content</td>
        <td style="white-space: nowrap">Right content</td>
    </tr>
</table>

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

Answer 2

Это кажется относительно простым, так что я мог бы что-то упустить, но учитывая следующий HTML:

HTML:

<table>
    <tr>
        <td id="left">Some content</td>
        <td id="center">Center content</td>
        <td id="right">Right content</td>
    </tr>
    <tr>
        <td>Some content</td>
        <td>Center content</td>
        <td>Right content</td>
    </tr>
</table>

и css:

table {
    border-collapse: collapse;
    width: 90%;
    border: 1px solid #ccc;
}

#center {
    width: 70%;
}

Ключом к этой работе является определение width для самого table, а затем для td из id="center" (и таблицы применяют одинаковую ширину ко всем ячейкам в одном и том же «столбце», и высота ячеек в одном и том же «ряду», если только colspan или rowspan не вызывает другое поведение). Демонстрация JS Fiddle по адресу: http://jsfiddle.net/davidThomas/hJZ6Q/.

«Столбцы» (определяемые #left и #right) остаются без явной ширины, что заставляет браузер назначать одинаковую ширину для обоих, в данном случае это около 15% ширины таблицы , Конечно, вы можете назначить ширину любой желаемой единицы для «столбцов», при условии, что сумма вписывается в назначенную ширину самого table (так как отрицательные числа недопустимы для ширины таблицы, и назначая такую число заставит браузер игнорировать ширину и просто работать с любой оставшейся допустимой шириной).

Answer 3

Я предлагаю вам взглянуть на Идеальная компоновка 3 колонок Это жидкая компоновка и звучит как то, что вы ищете.