Размер таблицы HTML с различными размерами окна клиента

Question

Я пытаюсь создать приложение для планирования HTML, которое будет изменять размеры созданных таблиц в соответствии с размером экрана, сохраняя при этом такое же соотношение размеров.Выглядит нормально, когда у меня полноэкранный режим: .Но когда я изменяю размер окна или кто-то с другим разрешением экрана запускает его, расположение таблиц портится примерно так: .

Мне было интересно, смогу ли я что-нибудь сделать в моих файлах CSS или JavaScript, которые бы обеспечивали одинаковое соотношение и относительное расположение каждой таблицы независимо от размера экрана или разрешения, на котором она запускалась.Я включу JSFiddle для дальнейшего понимания здесь:

CSS для таблиц и позиционирования:

/* To control the style of the overall table class */
table {
  border: 0.0625em solid black;
  text-align: center;
  table-layout: fixed;
}

th, td {
  border: 0.0625em solid black;
  width: 8.75em;
  height: 2.1875em;
}

/* Settings for Days row */
.tableDays {
  width: 8.75em;
}

/* Settings for Employee column */
.tableEmployees {
  line-height: 2.1875em;
}

/* Settings for Tasks table */
.tableTasks {
  width:100%;
  margin-top:0.3125em;
  empty-cells: show;
  height:62.5em;
  line-height: 2.1875em;
  width: 6.25em;
}

.empTaskCont {
  height: 31.25em;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding-bottom: 1.875em;
}

#table-wrapper-days {
  position: relative;
  width: 66.5em;
  margin-left: 15.8125em;
  /*float:right;*/
}

#table-scroll-days {
  height: auto;
  overflow-x: hidden;
}

#table-wrapper-employees {
  position: relative;
  float:left;
  width:18%;
  margin-top:0.5em;
}

#table-scroll-employees {
  width: auto;
  overflow-y: hidden;
  max-height: 31.25em;
}

#table-wrapper-tasks {
  position: relative;
  width:81%;
  float:right;
}

#table-scroll-tasks {
  overflow-x: scroll;
  overflow-y: scroll;
  max-height: 32.625em;
}

.employee-mod-btn{
  float:left;
}

JSFiddle: https://jsfiddle.net/hs5sz8kb/#&togetherjs=x3LUnVhmMp

Я все еще очень плохо знаком сHTML, CSS и JavaScript, поэтому любые дополнительные советы по моему коду приветствуются.Спасибо за ваше время!

Answer 1

Вместо того, чтобы использовать собственный CSS для стилизации ваших таблиц, который может занять некоторое время, чтобы он хорошо выглядел при любой ширине экрана, рассмотрите возможность использования bootstrap, который является адаптивной средой для HTML, CSS и т. Д.Загрузите, поскольку они предоставляют адаптивные таблицы, которые помогут вам в зависимости от размера экрана монитора или другого устройства.Воспользуйтесь этой ссылкой, которая поможет вам построить структуру html и добавить загрузчик в ваш рабочий процесс.Все, что вам нужно сделать, это изменить таблицу в соответствии с вашими потребностями.

Рекомендации:
https://getbootstrap.com/ https://getbootstrap.com/docs/4.0/content/tables/

Answer 2

При просмотре содержимого скрипки проблема связана не столько с CSS, сколько с макетом HTML.Первая проблема заключается в том, что вы создаете несколько таблиц, когда они должны быть просто 1 таблицей.Ваша верхняя «строка» должна быть частью таблицы со всем содержимым, а не отдельной таблицей.Ваш левый столбец также является отдельной таблицей.Объедините их все в одну таблицу, и это очень поможет.

Я не хочу перенаправлять ваши усилия на полное переписывание, потому что вы изучаете HTML и CSS, но вы можете обнаружить, что это очень эффективный способ реализовать "отзывчивый""дизайн с вспомогательной библиотекой.Я бы предложил рассмотреть возможность использования Bootstrap, хотя есть и много других.Bootstrap добавляет множество «вспомогательных классов», которые потребуют некоторых усилий для достижения того, чего вы пытаетесь достичь из уравнения.Рассмотрим, например, таблицы. Я думаю, что вам могут понадобиться таблицы с «точками останова».

https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

Другой вариант - всегда иметь отзывчивые таблицы, где размер экрана изменяет вас.получит горизонтальную рамку прокрутки.

Есть много вариантов на выбор, поэтому попробуйте.Вы можете легко добавить библиотеку Bootstrap в JS Fiddle в разделе «ресурсы».

Кроме того, вы можете рассмотреть возможность сохранения данных в формате JSON или в базе данных.По мере продвижения в этом проекте вы можете найти Datatables очень полезной библиотекой javascript.Это позволяет вам работать с необработанными данными и строить таблицы более динамично.

https://datatables.net/