Различные ширины td в разных строках в таблицах?

Быстрый вопрос: как это можно достичь? (см. изображение ниже)

Настройка буфера ширины td в простом html и css не имела эффекта.

Ширина td CAN может меняться, но только с той же шириной для каждой строки.

Ответ 1

Используйте три отдельных блока <table>, каждый из которых имеет одну строку с тремя столбцами различной ширины.

Ответ 2

Я не верю, что это может быть в одной таблице легко.

Вместо этого вы должны использовать атрибут colspan для перекрытия ячеек в разных строках.

Например, используйте 6 столбцов, первая строка будет иметь colspan = 2, td, colspan = 2

Вторая строка будет иметь td, td colspan = 2, td и т.д.

Это довольно грязно - вы можете рассмотреть возможность отображения своих данных по-другому, например, используя DIVs

Ответ 3

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

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <!-- Set Width of Individual Cells Here -->
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <!-- Set Width of Individual Cells Here -->
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <!-- Set Width of Individual Cells Here -->
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Здесь рабочий jsFiddle для иллюстрации.

Ответ 4

Фактически это возможно без этого суб-табуляции. Сейчас у меня это как ошибка в макете. Просто попробуйте сыграть с paddings и полями внутри ячеек: (

"Ошибка" работает последовательно в нескольких браузерах.

Изменить: Охотился на это.

td { display: block; }

Не делайте это дома.

Ответ 5

возьмите 1 главную таблицу с 3 tr и в каждом tr возьмите другую подтаблицу с 3 столбцами, чем примените css