Блог

Главная - Вопросы по программированию - Таблица с 3 столбцами. Фиксированная ширина центральной колонки. Как получить общую ширину для двух других столбцов?

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

#html #css #html-table

#HTML #css — код #html-таблица

Вопрос:

у меня есть таблица 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.

Комментарии:

1. проверьте решение, упомянутое ниже, с помощью тега colgroup

Ответ №1:

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

  1. Дайте среднему столбцу th max-width и min-width вместо width
  2. Укажите слева и справа th width значение 50% .
  3. Вообще не указывайте table 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>

Ответ №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;
}

Комментарии:

1. Это лучшее решение, и его следует использовать для управления шириной таблиц.

Ответ №3:

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

Метки: