Способ сделать это - настроить @media Rules.Вам необходимо задать для таблицы фиксированный размер ширины для экранов меньшего размера и overflow-x, равный scroll, чтобы включить прокрутку содержимого таблицы, когда она переполняется по левому и правому краям.
Для этогонам нужно изменить размер таблицы на маленьких экранах, если размер устройства, например, меньше 576 пикселей.
Вы определяете минимальную ширину таблицы здесь, исходя из ваших требований к дизайну.,min-width может быть 992px вместо 768px.Или что угодно.
После этого мы должны применить концепцию переполнения, о которой мы упоминали выше.
Ваши медиа-правила должны быть примерно такими: Where the minimum width of our table is 768px:
@media (min-width: 576px) {
.table-sm {
width: 768px;
oveflow-x:scroll;
}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
.table-sm {
width: 100%;
}
.table-md {
width: 100%;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.table-sm {
width: 100%;
}
.table-md {
width: 100%;
}
.table-lg {
width: 100%;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.table-sm {
width: 100%;
}
.table-md {
width: 100%;
}
.table-lg {
width: 100%;
}
.table-xl {
width: 100%;
}
}