Необычная таблица

строка таблицы разбита на две строки

Тогда это — две строки.

ширина колонок сохраняется

Т.е. ты хочешь сохранение [автоматической] ширины соответствующих ячеек таблицы в чётных и нечётных строках? Типа «свернуть» широкую строку таблицы? ИМХО, на голом html/css такое невозможно.

Объясни конкретнее, как именно сохраняется? Ровно через одну, или «зависит от самого длинного содержимого колонки»? Не совсем понятно, что именно ты хочешь. Возможно, тебе нужен просто flexbox. Или нужна черезстрочность (чётные строки  — одна ширина, нечётные — другая)?

Ничерта не понял из текста, но на всякий случай отмечу что css позволяет применить разные стили к четным и нечётным элементам

Тогда это — две строки

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

Извините, не уверен что понятно объяснил. Возможно нашёл бы сам решение если б знал как это правильно сформулировать то.

Объясни конкретнее, как именно сохраняется? Ровно через одну, или «зависит от самого длинного содержимого колонки»? Не совсем понятно, что именно ты хочешь. Возможно, тебе нужен просто flexbox. Или нужна черезстрочность (чётные строки — одна ширина, нечётные — другая)?

Нет, черезстрочность это не то. Предположим 1 колонка - ширина 10px, 2 - 20px, 3 - 30px, 4 - 10px (для простоты). Экранчик пусть будет 40px в ширину, вот таблица вместо полос прокрутки аккуратно разбилась автоматически.

Ничерта не понял из текста, но на всякий случай отмечу что css позволяет применить разные стили к четным и нечётным элементам

Про это я знаю

Нет, черезстрочность это не то. Предположим 1 колонка - ширина 10px, 2 - 20px, 3 - 30px, 4 - 10px (для простоты). Экранчик пусть будет 40px в ширину, вот таблица вместо полос прокрутки аккуратно разбилась автоматически.

Ну допустим. Ну сделай колонки такой ширины. В чём проблема? Судя по «вёрстке» в шапке, тебе ж ещё и надо, чтобы ширина отличалась на каждой строке? Погугли flexbox, может это нужно… Или как? Объясни внятно, что именно надо. Если на словах никак, то не знаю, нарисуй более внятный пример в гимпе приблизительный.

Предположим 1 колонка - ширина 10px, 2 - 20px, 3 - 30px, 4 - 10px (для простоты). Экранчик пусть будет 40px в ширину, вот таблица вместо полос прокрутки аккуратно разбилась автоматически.

Забыл добавить что это автоматически вычисленная ширина, по самому длинному контенту в каждой колонке. Если б ширина была известна то и проблем нет такое сделать.

Да это уже вопрос десятый. Ты объясни, что со строками, как именно это должно выглядеть? Вот то, что нарисовано в первом посте, на обычную таблицу не похоже вообще. Точнее это вообще не таблица уже, у неё колонок как таковых нет. Или они черезстрочные.

Вот то, что нарисовано в первом посте, на обычную таблицу не похоже вообще. Точнее это вообще не таблица уже, у неё колонок как таковых нет. Или они черезстрочные.

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