Таблица с 3 колонками. Фиксированная ширина центральной колонки. Как разделить ширину на два других столбца?

Question

у меня есть таблица шириной 100% с 3 столбцами. Центральный столбец должен иметь ширину 600 пикселей. Как можно получить два других равных по ширине, используя оставшееся пространство?

<table style="width: 100%">
    <tr>
        <td>left</td>
        <td style="width: 600px">center</td>
        <td>right</td>
    </tr>
</table>

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

Пожалуйста, не используйте JQuery / Javascript.

Answer 1

Новый ответ на этот старый вопрос.

1. Дайте средний столбец th a max-width и min-width вместо width
2. Дайте левую и правую th a width из 50%.
3. Не давайте table a width вообще.

Я исправил этот пример среднего столбца width в 300px.

Пример jsBin!

CSS

table {
    border-collapse: collapse;
}
th, td {
    border: solid 1px #CCC;
    padding: 10px;
}
.fixed {
    max-width: 300px;
    min-width: 300px;
}
.fluid {
        width: 50%;
}

HTML

<table>
    <thead>
        <tr>
            <th class="fluid">First Column</th>
            <th class="fixed">Fixed Column</th>
            <th class="fluid">Third Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Answer 2

Использование тега "colgroup" может быть очень полезным для этого.

<table class="fixed-center-table" border="1">
        <thead>
            <colgroup>
                <col>
                <col id="middle-column">
                <col>
            </colgroup>
            <tr>
                <th>First Column</th>
                <th></th>
                <th>Third Column</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>AAAAAA</td>
                <td>BBBB</td>
                <td>CCCCC</td>
            </tr>
            <tr>
                <td>AAAAAA</td>
                <td>BBBB</td>
                <td>CCCCC</td>
            </tr>
            <tr>
                <td>AAAAAA</td>
                <td>BBBB</td>
                <td>CCCCC</td>
            </tr>
        </tbody>
</table>

.fixed-center-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.fixed-center-table  td{
   text-align: center;
}

col#middle-column {
   width: 600px;
}

Answer 3

Я думаю, что "align = center", используемый с центральным столбцом, может вам помочь.