- 15, May 2024
- #1
Привет,
Я пытаюсь сделать адаптивную таблицу. Я закодировал таблицу, и она выглядит примерно так, как я хочу, на настольном компьютере и планшете - https://bankruptcycanada.com/table-header/
Однако при дальнейшем уменьшении до мобильного представления второй столбец таблицы скрывается и появляется полоса прокрутки. Как я могу сделать так, чтобы второй столбец опускался ниже первого и располагался друг над другом вместо вертикальной полосы прокрутки на телефоне?
Мой HTML:
<таблица>
<голова>
<тр>
Найти попечителя по провинции
Найти доверенного лица по почтовому индексу
<тело>
<тр>
<форма>
Найдите ближайший офис попечителя с помощью поиска по почтовому индексу
Мой CSS:
.table-2 {ширина: 75%; поле слева: авто; поле справа: авто;}
.table-2 tablehead {background-color:#F60;}
.table-2 td {ширина:50%;}
/* Смартфоны (портрет) ----------- */
Скрытая информация :: Авторизуйтесь для просмотра »
только экран и (максимальная ширина: 767 пикселей) {
.table-2 {ширина: 75%; поле слева: авто; поле справа: авто;}
.table-2 tablehead {background-color:#F60;}
.table-2 td {ширина:50%;}
}
Однако при дальнейшем уменьшении до мобильного представления второй столбец таблицы скрывается и появляется полоса прокрутки. Как я могу сделать так, чтобы второй столбец опускался ниже первого и располагался друг над другом вместо вертикальной полосы прокрутки на телефоне?
Мой HTML:
<таблица>
<голова>
<тр>
Найти попечителя по провинции
Найти доверенного лица по почтовому индексу
<тело>
<тр>
<форма>
Выберите свою провинцию Альберта BC Манитоба Нью-Брансуик Ньюфаундленд Новая Шотландия Нунавут СЗТ ОнтариоPEIКвебекСаскачеванЮкон
Найдите ближайший офис попечителя с помощью поиска по почтовому индексу
Мой CSS:
.table-2 {ширина: 75%; поле слева: авто; поле справа: авто;}
.table-2 tablehead {background-color:#F60;}
.table-2 td {ширина:50%;}
/* Смартфоны (портрет) ----------- */
Скрытая информация :: Авторизуйтесь для просмотра »
только экран и (максимальная ширина: 767 пикселей) {
.table-2 {ширина: 75%; поле слева: авто; поле справа: авто;}
.table-2 tablehead {background-color:#F60;}
.table-2 td {ширина:50%;}
}
![[Виктория Волевач] Всегда молода](/assets/images/icons/forum2.png){kind=icon}
![[Фишка] Кач для 90+](/assets/images/icons/forum6.png){kind=icon}