Как предотвратить динамическое увеличение таблицы c на определенной высоте? - PullRequest
Новая
       8

Как предотвратить динамическое увеличение таблицы c на определенной высоте?

0 голосов
/ 26 марта 2020

Я пытаюсь представить простую игровую доску для реализации игры Flood it, которая состоит из матрицы m, представленной таблицей, содержимое таблицы задается динамически с использованием функции javascript.

Я написал этот бит css: 

html, body {
    height: 100%;
}

table {
    border-style: solid;
    width: 30%;
}

td {
    position: relative;
    border-style: solid;
}

td:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

div#game_board_container {
    display: block;
    height: 50%;
    background-color: red;
}

div.cell_content {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;

}

, который служит для определения макета некоторого html, который можно упростить до: 

<div id="game_board_container">
    <table id="game_board">
    <table>
</div>

После обновления строки таблицы выглядят как <tr><td><div class="cell_content"></div></td>....</tr> с m делениями на строку и n строк на таблицу.

css хорошо работает с матрицами n по n и n по m, где n

Но когда n> m, строки складываются в направлении нижняя часть страницы; Я понимаю, что это вызвано тем, что я использовал «отзывчивый квадратный дизайн» для определения моих ячеек как квадратов, а также тем фактом, что размеры моей таблицы определяются только ее шириной, и, к сожалению, я пытаюсь определить высоту или максимальный размер. Высота для моего стола или его упаковка в контейнер, определенный по высоте, ничего не сделали ...

РЕДАКТИРОВАТЬ: я чувствую, что мне нужно указать, что я хочу, чтобы ячейки сокращались, а таблица игрового поля сохраняла свои размеры, которые здесь 30% страницы браузера по высоте и ширине.

Сегодня я перепробовал много вариантов, но ни один из них не работал. Так как я довольно новичок в css, я почти уверен, что что-то упустил, но я не вижу, что ...

1 Ответ

0 голосов
/ 26 марта 2020

Вместо использования таблицы, которая семантически должна использоваться только для табличных данных, вам было бы гораздо лучше использовать div и css grid. Используя медиа-запросы, вы можете гораздо проще настроить количество ящиков соответственно. 

.board {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(4,50px);
  grid-gap: 10px;
}
.box {
  background-color: dodgerblue;
  color: white;
}
<div class="board">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>
...