Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.54/13: Рейтинг темы: голосов - 13, средняя оценка - 4.54
 Аватар для Cdelphi78
140 / 74 / 18
Регистрация: 21.02.2014
Сообщений: 3,444

Добавить границы во flex таблицы?

21.09.2019, 12:33. Показов 2664. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть страничка с сайтом http://dev-working.ru/gazobeton_20_09_2019/
На нем есть адаптивные flex-box таблицы, у меня не получается добавить ровные вертикальные границы в эту таблицу как на макете, так чтобы не нарушилась структура таблицы и работало адаптивное смещение блоков..
Вот макет как должно быть..
Миниатюры
Добавить границы во flex таблицы?  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
21.09.2019, 12:33
Ответы с готовыми решениями:

Flex-контейнер с input элементами расширяет границы основного блока
Основной блок содержит 2 блока 1-й с некоторым текстом 2-й flex блок с input элементами 2-й блок как будто не видит...

Как прописывать flex-basis и flex-grow/flex-shrink?
Доброго времени суток? Объясните , пожалуйста, такую вещь, - куда вписывать свойства flex-basis, а также , соответственно flex-grow ,...

Фиксация заголовка таблицы + flex
Я создал таблицу с вертикальной и горизонтальной прокруткой. Основной блок назначил - display: flex; 1. У меня принудительно...

8
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126
21.09.2019, 20:18
Cdelphi78, А вы таблицу на чем верстаете?

Добавлено через 29 минут
не адаптированная таблица
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.date-cell, .topic-cell {
    width: 20%;
    border: 2px solid #e4e6ec;
}
.Rtable .Rtable-row {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #e4e6ec;
    /* -webkit-box-align: center; */ он вам здесь зачем? только ломает всё
    /* -webkit-align-items: center; */
    -ms-flex-align: center;
    /* align-items: unset; */
    text-align: center;
}
Адаптированная таблица

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@media (max-width: 767.98px)
.Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--heading {
    padding: 1em;
    /* display: inline-block; */ здесь flex должен быть
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 120px;
    min-width: 120px;
    color: #f36d2e;
    font-weight: 700;
    border-right: 1px solid #ccc;
    margin-right: 1em;
}
 
.Rtable .Rtable-row .Rtable-cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    /* padding: 1em; */ здесь паддинг в АДАПТИВЕ не нужен
    overflow: hidden;
    list-style: none;
}
0
 Аватар для Cdelphi78
140 / 74 / 18
Регистрация: 21.02.2014
Сообщений: 3,444
23.09.2019, 11:19  [ТС]
Цитата Сообщение от Cheeeasy2501 Посмотреть сообщение
А вы таблицу на чем верстаете?
В каком смысле на чем?

Добавлено через 1 минуту
Cheeeasy2501, ок, это понятно но только как вертикальные border ы сделать? Чтобы адекватно смотрелось?
0
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126
23.09.2019, 11:33
Cdelphi78, Чтобы адекватно смотрелось проще верстать через display:grid
0
 Аватар для Cdelphi78
140 / 74 / 18
Регистрация: 21.02.2014
Сообщений: 3,444
23.09.2019, 11:49  [ТС]
Cheeeasy2501, я с гридами, не работал, какой прок от них в отличии от флексов? И как оно в адаптиве будет выглядеть? Да и гриды еще не поддерживаются браузерами...
0
 Аватар для Cdelphi78
140 / 74 / 18
Регистрация: 21.02.2014
Сообщений: 3,444
23.09.2019, 11:56  [ТС]
Cheeeasy2501, Ну вот такое конешно никуда не годится..
Миниатюры
Добавить границы во flex таблицы?  
0
 Аватар для Cdelphi78
140 / 74 / 18
Регистрация: 21.02.2014
Сообщений: 3,444
23.09.2019, 11:57  [ТС]
Цитата Сообщение от Cheeeasy2501 Посмотреть сообщение
/* -webkit-box-align: center; */ он вам здесь зачем? только ломает всё
* * /* -webkit-align-items: center; */
* * -ms-flex-align: center;
* * /* align-items: unset; */
* * text-align: center;
}
Дак потому что тупик какой то! Просто там нужно по центру все выровнять..
0
38 / 27 / 12
Регистрация: 13.09.2019
Сообщений: 126
23.09.2019, 13:20
Cdelphi78, На скрине такое получается, потому что вы даете неправильно align-items:center.
Дайте align-items не Rtable-row, а Rtable-cell
Миниатюры
Добавить границы во flex таблицы?  
0
 Аватар для Cdelphi78
140 / 74 / 18
Регистрация: 21.02.2014
Сообщений: 3,444
23.09.2019, 18:37  [ТС]
Cheeeasy2501, это не очень помогает..
Миниатюры
Добавить границы во flex таблицы?  
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
23.09.2019, 18:37
Помогаю со студенческими работами здесь

Возможно ли добавить к сайту на FLEX страницы, написанные на ASP.NET
Если вопрос выйдет абсолютно "чайниковским" - просьба не очень глумиться! Есть сайт, построенныи на FLEX. Возможно ли добавить к сайту...

Как добавить границы к фигуре?
Как добавить границы к фигуре??? например к этой Dim ellips As New RectangleF(NumericUpDown3.Value, NumericUpDown4.Value,...

Границы Таблицы
Как оптимизировать код. Задача: если ячейка имеет границы (ну в смысле при распечатки распечатываются границы), то изменить эту границу...

Границы таблицы
Есть таблица с прозрачным фоном, но рамка не у всей таблицы, точнее нет верхней и левой линии границы, а хотелось бы что бы они были, это...

Границы таблицы в CSS
Убрать границу таблицы не получается в CSS. table {border-width: 0px;} td { padding: 0cm 0cm; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru