Как создать таблицу с различным количеством ячеек в строках?

Моя идея в целом: у меня есть HTML-таблица с настраиваемыми рядами внутри. Это аналогичный пример:

2-я ячейка в 1-м ряду - Shold будет около 40% строк и 6-я ячейка 1-й строки должна быть двойной

8-я ячейка 2-й строки должна быть большой ~ 40%

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

Я пробовал дюжину вариантов с colspan и% от ширины, но ничего не работает для меня. это мой последний результат:


Можете ли вы помочь мне правильно построить эти строки...

3 ответа

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


Я бы предпочел поместить их в divs со стилем. Довольно ясно, что вы не используете их для табличных данных - поскольку вы используете его для макета, я предлагаю рассмотреть этот вопрос здесь. Это может быть достигнуто относительно легко с некоторыми простыми css.


Чтобы получить такой вариант, вам нужно иметь 2 разных стола, так как он попытается выровнять td

licensed under cc by-sa 3.0 with attribution.