Я пытаюсь сгенерировать таблицу, состоящую из максимально возможного числа квадратных ячеек заданных размеров. Сложность в том, что таблица не должна превышать размеры области просмотра. CSS таблицы выглядит следующим образом:
.gameField {
table-layout: fixed;
position: absolute;
top: 0px; left: 0px;
border-spacing: 1px 1px;
}
И он имеет атрибут html cellSpacing = "1" в качестве запасного варианта для незаполненных браузеров border-spacing *1007*. Теперь мой код основан на следующем предположении:
viewPortWidth = numberOfColumns * cellSideLength + (numberOfColumns + 1)
viewPortHeight = numberOfRows * cellSideLength + (numberOfRows + 1)
Чтобы немного объяснить логику позади - длина стороны таблицы всегда состоит из числа ячеек * длины их стороны + границ. И всегда на одну границу больше, чем количество строк / столбцов, поэтому (numberOfColumns или Rows + 1) . Рассматривая это как математическое уравнение, мы, зная размеры cellSideLength и область просмотра, можем легко рассчитать количество строк и столбцов:
numberOfColumns = Math.floor( (viewportWidth - 1) / (cellSideLength + 1) )
numberOfRows = Math.floor( (viewportHeight - 1) / (cellSideLength + 1) )
Проблема, однако, в том, что он не работает должным образом. Таблица выглядит немного меньше, чем она может быть при малых разрешениях, и становится слишком большой при высоких разрешениях и превышает страницу (я проверял это с помощью уменьшения масштаба страницы - это может быть не слишком точным тестом). - Демонстрация в реальном времени (для cellSideLength установлено значение 40px) - Вы можете уменьшить масштаб страницы, например, в Chromium, и посмотреть, как таблица превосходит страница.
Это заставляет меня думать, что, возможно, мои предположения относительно того, как определяется размер html-таблицы, были несколько ошибочными. Если у кого-нибудь есть полезный совет, я весь в ушах.