Прокрутка таблицы в случае переполнения с использованием адаптивной таблицы Bootstrap

Прокрутка таблицы в случае переполнения с использованием адаптивной таблицы Bootstrap ⇐ CSS

Ответить Пред. тема След. тема

1 сообщение • Страница 1 из 1

Anonymous

Прокрутка таблицы в случае переполнения с использованием адаптивной таблицы Bootstrap

Цитата

Сообщение Anonymous » 09 дек 2024, 01:00

У меня есть упрощенный макет:

Имеет гибкий макет, содержащий навигацию с левой стороны, которая использует 15 % ширины представления.
Имеет главную, занимающую оставшееся горизонтальное пространство.

Для одного представления у меня есть таблица, которая занимает больше доступного места внутри main. Я хотел бы прокручивать таблицу по горизонтали, а не всю страницу. Я попытался сделать это, обернув таблицу с помощью Table-Response с помощью Bootstrap, однако при этом полоса прокрутки по-прежнему размещается для всей страницы, а не только для элементов таблицы/основных, как я хочу. table-Response звучит так, как будто он делает именно то, что я хочу, но в моем случае он работает не так, как я ожидаю, и я подозреваю, что что-то упускаю.

Код: Выделить всё

div.main {
display: flex;
min-height: 100%;
}

div.main>nav {
background-color: coral;
flex: 0 0 15vw;
}

div.main>main {
flex:  a u t o ; < b r   / > } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; l i n k   r e l = " s t y l e s h e e t "   h r e f = " h t t p s : / / s t a c k p a t h . b o o t s t r a p c d n . c o m / b o o t s t r a p / 4 . 3 . 1 / c s s / b o o t s t r a p . m i n . c s s "   i n t e g r i t y = " s h a 3 8 4 - g g O y R 0 i X C b M Q v 3 X i p m a 3 4 M D + d H / 1 f Q 7 8 4 / j 6 c Y / i J T Q U O h c W r 7 x 9 J v o R x T 2 M Z w 1 T "   c r o s s o r i g i n = " a n o n y m o u s " & g t ; < b r   / > & l t ; s c r i p t   s r c = " h t t p s : / / c o d e . j q u e r y . c o m / j q u e r y - 3 . 3 . 1 . s l i m . m i n . j s "   i n t e g r i t y = " s h a 3 8 4 - q 8 i / X + 9 6 5 D z O 0 r T 7 a b K 4 1 J S t Q I A q V g R V z p b z o 5 s m X K p 4 Y f R v H + 8 a b t T E 1 P i 6 j i z o "   c r o s s o r i g i n = " a n o n y m o u s " & g t ; & l t ; / s c r i p t & g t ; < b r   / > & l t ; s c r i p t   s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / p o p p e r . j s / 1 . 1 4 . 7 / u m d / p o p p e r . m i n . j s "   i n t e g r i t y = " s h a 3 8 4 - U O 2 e T 0 C p H q d S J Q 6 h J t y 5 K V p h t P h z W j 9 W O 1 c l H T M G a 3 J D Z w r n Q q 4 s F 8 6 d I H N D z 0 W 1 "   c r o s s o r i g i n = " a n o n y m o u s " & g t ; & l t ; / s c r i p t & g t ; < b r   / > & l t ; s c r i p t   s r c = " h t t p s : / / s t a c k p a t h . b o o t s t r a p c d n . c o m / b o o t s t r a p / 4 . 3 . 1 / j s / b o o t s t r a p . m i n . j s "   i n t e g r i t y = " s h a 3 8 4 - J j S m V g y d 0 p 3 p X B 1 r R i b Z U A Y o I I y 6 O r Q 6 V r j I E a F f / n J G z I x F D s f 4 x 0 x I M + B 0 7 j R M "   c r o s s o r i g i n = " a n o n y m o u s " & g t ; & l t ; / s c r i p t & g t ; < b r   / > & l t ; d i v   c l a s s = " m a i n " & g t ; < b r   / >     & l t ; n a v & g t ; < b r   / >     & l t ; / n a v & g t ; < b r   / >     & l t ; m a i n & g t ; < b r   / >         & l t ; d i v   c l a s s = " t a b l e - r e s p o n s i v e " & g t ; < b r   / >             & l t ; t a b l e   c l a s s = " t a b l e   t a b l e - s t r i p e d   t a b l e - s m " & g t ; < b r   / >                 & l t ; t h e a d & g t ; < b r   / >                     & l t ; t r & g t ; < b r   / >                         & l t ; t h & g t ; & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >              Header Name
Header Name
Header Name
Header Name
Header Name
Header Name
Header Name
Header Name
Header Name
Header Name




Column Name
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value


Column Name
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value


Column Name
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value

Подробнее здесь: https://stackoverflow.com/questions/588 ... responsive

1733695237

Anonymous

У меня есть упрощенный макет:

[list]
[*]Имеет гибкий макет, содержащий навигацию с левой стороны, которая использует 15 % ширины представления.
[*]Имеет главную, занимающую оставшееся горизонтальное пространство.
[/list]

Для одного представления у меня есть таблица, которая занимает больше доступного места внутри main. Я хотел бы прокручивать таблицу по горизонтали, а не всю страницу. Я попытался сделать это, обернув таблицу с помощью Table-Response с помощью Bootstrap, однако при этом полоса прокрутки по-прежнему размещается для всей страницы, а не только для элементов таблицы/основных, как я хочу.  table-Response звучит так, как будто он делает именно то, что я хочу, но в моем случае он работает не так, как я ожидаю, и я подозреваю, что что-то упускаю.


[code]div.main {
display: flex;
min-height: 100%;
}

div.main>nav {
background-color: coral;
flex: 0 0 15vw;
}

div.main>main {
flex:  a u t o ; < b r   / > } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; l i n k   r e l = " s t y l e s h e e t "   h r e f = " h t t p s : / / s t a c k p a t h . b o o t s t r a p c d n . c o m / b o o t s t r a p / 4 . 3 . 1 / c s s / b o o t s t r a p . m i n . c s s "   i n t e g r i t y = " s h a 3 8 4 - g g O y R 0 i X C b M Q v 3 X i p m a 3 4 M D + d H / 1 f Q 7 8 4 / j 6 c Y / i J T Q U O h c W r 7 x 9 J v o R x T 2 M Z w 1 T "   c r o s s o r i g i n = " a n o n y m o u s " & g t ; < b r   / > & l t ; s c r i p t   s r c = " h t t p s : / / c o d e . j q u e r y . c o m / j q u e r y - 3 . 3 . 1 . s l i m . m i n . j s "   i n t e g r i t y = " s h a 3 8 4 - q 8 i / X + 9 6 5 D z O 0 r T 7 a b K 4 1 J S t Q I A q V g R V z p b z o 5 s m X K p 4 Y f R v H + 8 a b t T E 1 P i 6 j i z o "   c r o s s o r i g i n = " a n o n y m o u s " & g t ; & l t ; / s c r i p t & g t ; < b r   / > & l t ; s c r i p t   s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / p o p p e r . j s / 1 . 1 4 . 7 / u m d / p o p p e r . m i n . j s "   i n t e g r i t y = " s h a 3 8 4 - U O 2 e T 0 C p H q d S J Q 6 h J t y 5 K V p h t P h z W j 9 W O 1 c l H T M G a 3 J D Z w r n Q q 4 s F 8 6 d I H N D z 0 W 1 "   c r o s s o r i g i n = " a n o n y m o u s " & g t ; & l t ; / s c r i p t & g t ; < b r   / > & l t ; s c r i p t   s r c = " h t t p s : / / s t a c k p a t h . b o o t s t r a p c d n . c o m / b o o t s t r a p / 4 . 3 . 1 / j s / b o o t s t r a p . m i n . j s "   i n t e g r i t y = " s h a 3 8 4 - J j S m V g y d 0 p 3 p X B 1 r R i b Z U A Y o I I y 6 O r Q 6 V r j I E a F f / n J G z I x F D s f 4 x 0 x I M + B 0 7 j R M "   c r o s s o r i g i n = " a n o n y m o u s " & g t ; & l t ; / s c r i p t & g t ; < b r   / > & l t ; d i v   c l a s s = " m a i n " & g t ; < b r   / >     & l t ; n a v & g t ; < b r   / >     & l t ; / n a v & g t ; < b r   / >     & l t ; m a i n & g t ; < b r   / >         & l t ; d i v   c l a s s = " t a b l e - r e s p o n s i v e " & g t ; < b r   / >             & l t ; t a b l e   c l a s s = " t a b l e   t a b l e - s t r i p e d   t a b l e - s m " & g t ; < b r   / >                 & l t ; t h e a d & g t ; < b r   / >                     & l t ; t r & g t ; < b r   / >                         & l t ; t h & g t ; & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; H e a d e r   N a m e & l t ; / t h & g t ; < b r   / >              Header Name
Header Name
Header Name
Header Name
Header Name
Header Name
Header Name
Header Name
Header Name
Header Name




Column Name
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value


Column Name
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value


Column Name
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value
value





[/code]




Подробнее здесь: [url]https://stackoverflow.com/questions/58881578/scrolling-a-table-if-overflow-using-bootstrap-table-responsive[/url]

Ответить Пред. тема След. тема

1 сообщение • Страница 1 из 1

Быстрый ответ

Заголовок:

Имя пользователя:

Изменение регистра текста:

Смайлики

Ещё смайлики…

К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми. Можно прикреплять файлы, перетаскивая их в окно сообщения.

Максимально разрешённый размер вложения: 15 МБ.

Имя файла:

Комментарий к файлу:

Имя файла	Комментарий к файлу	Размер	Статус

Похожие темы

Ответы

Просмотры

Последнее сообщение

Переполнение текста в адаптивной таблице Bootstrap

Последнее сообщение Гость « 17 мар 2024, 09:55
Добавлено в форуме CSS

Гость » 17 мар 2024, 09:55 » в форуме CSS

Я использую адаптивную таблицу Bootstrap. Проблема, с которой я столкнулся здесь, заключается в том, что текст в столбце таблицы переполнен. Насколько мне известно, таблица автоматически регулирует ширину столбца, если она реагирует. Но проблема в...

0 Ответы

13 Просмотры

Последнее сообщение Гость
17 мар 2024, 09:55
Позиция переполнения: абсолютный дочерний элемент с позицией: относительный родительский элемент из переполнения-y: авто

Последнее сообщение Anonymous « 28 июн 2024, 19:35
Добавлено в форуме CSS

Anonymous » 28 июн 2024, 19:35 » в форуме CSS

Я ищу способ сделать это с помощью HTML + CSS. У меня есть прокручиваемый список, где каждый элемент имеет значок рядом с ним, расположенный с позицией: абсолютный, как половина вне контейнера списка. Контейнер списка должен иметь параметр...

0 Ответы

68 Просмотры

Последнее сообщение Anonymous
28 июн 2024, 19:35
Позиция переполнения: абсолютный дочерний элемент с позицией: относительный родительский элемент из переполнения-y: авто

Последнее сообщение Anonymous « 29 июн 2024, 11:21
Добавлено в форуме CSS

Anonymous » 29 июн 2024, 11:21 » в форуме CSS

Я ищу способ сделать это с помощью HTML + CSS. У меня есть прокручиваемый список, где каждый элемент имеет значок рядом с ним, расположенный с позицией: абсолютный, как половина вне контейнера списка. Контейнер списка должен иметь параметр...

0 Ответы

43 Просмотры

Последнее сообщение Anonymous
29 июн 2024, 11:21
Переполнение скрыто, а вложенная прокрутка переполнения не работает

Последнее сообщение Гость « 14 мар 2024, 13:57
Добавлено в форуме CSS

Гость » 14 мар 2024, 13:57 » в форуме CSS

У меня проблема с тем, что элемент div не прикрепляется к родительскому элементу, хотя у него есть переполнение: скрыто.
Я просмотрел переполнение: скрыто code> вопросы здесь по stackoverflow, но у большинства из них либо проблемы с позицией, либо...

0 Ответы

24 Просмотры

Последнее сообщение Гость
14 мар 2024, 13:57
Прокрутка переполнения не работает на большом экране

Последнее сообщение Anonymous « 09 май 2024, 22:42
Добавлено в форуме CSS

Anonymous » 09 май 2024, 22:42 » в форуме CSS

я работаю над проектом vue, и у меня есть этот html

Explore workouts

Я использую для этого попутный ветер. Проблема в том, что у меня overflow-x-auto не работает на больших экранах. Но когда я сворачиваю экран, все работает. На большом...

0 Ответы

20 Просмотры

Последнее сообщение Anonymous
09 май 2024, 22:42

Вернуться в «CSS»