Расстояние между столбцами таблицы занимает последнее место без использования colspan

У меня есть таблица с четырьмя строками. Внутри строки 1 находится 1 столбец. Внутри строки 2 есть 3 столбца. Внутри строки 3 есть 2 столбца. Внутри 4-го ряда 2 столбца. Столбец строки 1 имеет colspan 3, так что столбец охватывает всю таблицу, но в строках 3 и 4 я хочу, чтобы два столбца распределялись одинаково по всей ширине таблицы. Проблема в том, что я не могу добавить colspan 1.5, это просто не работает. Мой вопрос: как я могу заставить столбцы строк 3 и 4 равномерно распределяться по таблице?

Код, который у меня есть:

<table id="tbContainer" style="table-layout:fixed;" cell-padding="0" cell-spacing="0">
<tr>
    <td colspan="3">
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>
<tr>
    <td>
        <button style="width: calc(100%);">Button</button>
    </td>
    <td>
        <button style="width: calc(100%);">Button</button>
    </td>
    <td>
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>
<tr>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>
<tr>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>


html html-table columnspan tablecolumn
person mr developer    schedule 13.12.2017    source источник
comment
Добро пожаловать в StackOverflow! Чтобы мы могли помочь вам лучше, не могли бы вы обновить свой вопрос, чтобы он отображал ваш соответствующий код в < b>минимальный, полный и проверяемый пример. Также было бы полезно, если бы вы сообщили нам, что вы пытались решить до сих пор твоя проблема. Для получения дополнительной информации см. справочную статью о как задавать хорошие вопросы, и совершите экскурсию по сайту :)   -  person Obsidian Age    schedule 13.12.2017
comment
@ObsidianAge добавил код. Я объяснил, что я пробовал в посте   -  person mr developer    schedule 13.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

Как насчет таблицы шириной 12 ячеек. 12 можно учитывать любую ширину столбца, которая вам требуется.

Строка 1 столбец 12 – 1 столбец
Строка 2 столбец 4 – 3 столбца
Строка 3 столбец 6 – 2 столбца
Строка 4 столбец 6 – 2 столбца 

<table id="tbContainer" style="table-layout:fixed;" cell-padding="0" cell-spacing="0">
    <tr>
        <td colspan="12">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="4">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="4">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
</table>
person stoi2m1    schedule 13.12.2017