Разная ширина тд в разных строках таблиц?

Question

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

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

Ширина td МОЖЕТ изменяться, но только с одинаковой шириной для каждого ряда.

Answer 1

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

Answer 2

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

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

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

Второй ряд будет иметь значения td, td colspan = 2, td и т. Д.

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

Answer 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 для иллюстрации .

Answer 4

На самом деле это возможно без подзадач. Я имею это как ошибку в моем макете сейчас. Просто попробуйте поиграть с отступами и полями внутри ячеек: (

«Ошибка» работает согласованно в нескольких браузерах.

Edit: Охотился на него.

td { display: block; }

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

Answer 5

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