Как выравнивать таблицу по размеру окна?

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

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

Код стиля:

<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>