0

У меня проблема с отображением таблицы в браузере.

Так выглядит таблица на большом экране браузера на большом экране браузера Но когда размер экрана уменьшается, происходит следующее: на маленьком экране браузера Как можно это исправить?

Код стиля:

<style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid black; /* Параметры рамки */
   }
   TH {
    background: #b0e0e6; /* Цвет фона */
   }
   {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.table-fixed-head {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  height: 100vh;
}

.table-fixed-head th,
.table-fixed-head td {
  padding: 5px;
  text-align: center;
  width: 33.333vw;
}

.table-fixed-head thead {
  background-color: #333;
  color: #FDFDFD;
}

.table-fixed-head thead tr {
  display: block;
  position: relative;
}

.table-fixed-head tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: calc(100vh - 30px);
}

.table-fixed-head tbody tr:nth-child(even) {
  background-color: #DDD;
}
  </style>
6
  • Width: 100%; попробуй ширину таблицы задать вот так 12 июн 2020 в 15:22
  • Ничего не изменилось( 12 июн 2020 в 15:24
  • Пробуй bootstrap, класс ‘container’ 12 июн 2020 в 15:25
  • Просто нужно сделать, чтоб таблица в малом окне была такая же, как и на полном экране, чтоб можно было двигать направо, можно добавить горизонтальный бегунок? 12 июн 2020 в 15:25
  • 1
    Добавьте Минимальный работающий пример своей таблицы со стилями в топик или хотя бы залейте на какой-то сервис и киньте ссылку.
    – InDevX
    12 июн 2020 в 16:27

1 ответ 1

0

Вам нужно отключить overflow при определенных размерах экрана:

@media (max-width: 1000px) {
.table-fixed-head tbody {
  overflow: visible;
}

Или попробуйте другие его свойства

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.