Давно на смену табличной верстке пришли другие технологии, но иногда ее еще используют т.к. «под рукой нет простого и понятного примера замены».
Поэтому ниже простая демонстрация замены таблицы на flexbox.
| Left 1 | Center 1 | Right 1 |
| Left 2 | Center 2 | Right 2 |
| Left 3 | Center 3 | Right 3 |
.soflex1Left 1Left 2Left 3Center 1Center 2Center 3Right 1Right 2Right 3
.soflex2 > divLeft 1Center 1Right 1Left 2Center 2Right 2Left 3Center 3Right 3
table td, .soflex1 div div, .soflex2 div div < border: 1px solid #a9a6a3; padding: 3px; >.soflex1 < flex-direction: row; display: flex; >.soflex2 > divLeft 1 Center 1 Right 1 Left 2 Center 2 Right 2 Left 3 Center 3 Right 3
Left 1Left 2Left 3Center 1Center 2Center 3Right 1Right 2Right 3
Left 1Center 1Right 1Left 2Center 2Right 2Left 3Center 3Right 3
Иногда нужно повлиять на отображение «колонок» в зависимости от ширины экрана:
.soflex111 < flex-direction: row; display: flex; justify-content: space-between; >@media only screen and (max-width: 800px) < .soflex111 < flex-direction: column; >>
Смотрю все современные таблицы исопльзуют flex-box в фреймворках , подскажите плиз, какой алгоритм выравнивания всех столбцов?
если делать flex:1 , тогда все столбцы будут одинаковой ширины, но как сделать так что бы ширина столбца подстаривалась под контнент?
существует ли в 2018 году нормальный подход для создания таблицы с возможностью фиксировать шапку при скроле?
Комментировать
Решения вопроса 1
В каком это фреймворке костылят таблицы через флексы?
Фиксировать шапку можно через position: sticky;
Фикс шапки + колонки
Ранее уже была похожая тема: «Адаптивная таблица», но она имела фиксированный размер ячеек и могла использоваться не для всех решений .
Вариант изложенный в этой теме универсальный и подойдет для любого объема текста.
| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
|---|---|---|---|
| Заголовок 1 Контент 1 | Заголовок 2 Контент 1 (Вариант с большим количеством текста) | Заголовок 3 Контент 1 | Заголовок 4 Контент 1 |
| Заголовок 1 Контент 2 | Заголовок 2 Контент 2 | Заголовок 3 Контент 2 | Заголовок 4 Контент 2 |
| Заголовок 1 Контент 3 | Заголовок 2 Контент 3 (Вариант с большим количеством текста / Вариант с большим количеством текста) | Заголовок 3 Контент 3 | Заголовок 4 Контент 3 |
| Заголовок 1 Контент 4 | Заголовок 2 Контент 4 | Заголовок 3 Контент 4 (Вариант с большим количеством текста) | Заголовок 4 Контент 4 |
| Заголовок 1 Контент 5 | Заголовок 2 Контент 5 | Заголовок 3 Контент 5 | Заголовок 4 |
Для просмотра мобильного варианта, сузьте окно браузера.
Для заполнения таблицы исполнений необходимо предварительно создать исполнения детали/сборки. Исполнения создаются в команде FCE: Конфигурации и исполнения.
После активации команды появится окно Таблица исполнений. В левой части окна располагаются столбцы внешних переменных, созданных в модели, а также столбцы для литеры и порядкового номера строки таблицы. Все эти столбцы можно включать в таблицу. Для этого нужно выбрать переменную и переместить в правую часть окна, используя Drag’n’Drop .
В правой части расположено окно таблицы исполнений. Здесь показаны столбцы, которые будут включены в таблицу исполнений на чертеже.
Порядок столбцов в таблице можно изменять. Для этого достаточно переместить заголовок столбца в нужную сторону. Две красные стрелки укажут, между какими столбцами он будет расположен. Таким же образом можно расположить в нужном месте столбец, перемещённый из правой части окна с помощью Drag’n’Drop .
Кроме того, можно менять порядок строк в таблице. Для этого нужно выбрать строку и переместить её на нужную позицию.
В верхней части окна расположены опции для работы с таблицей исполнений.
Добавить строку . Опция добавляет пустую строку в конец таблицы.
Обновить порядковые номера строк . Опция обновляет номера строк в соответствующей колонке “n/n”. Опция используется, если строки в таблице были перемещены, и их нумерация нарушилась.
Отменить редактирование . При использовании опции, все внесённые изменения отменяются, и таблица возвращается к исходному виду.
Удалить строку . Удаляет выбранную строку из таблицы.
После нажатия кнопки [ OK ] на чертёж добавляется таблица. При желании её можно переместить при помощи маркера в левом верхнем углу.
Далее с созданной таблицей можно работать как с обычным текстом.
Для того, чтобы запустить редактор таблицы исполнений можно воспользоваться командой: