HTML таблица подгонка экрана по высоте с клетками в квадрате - PullRequest
Новая
       0

HTML таблица подгонка экрана по высоте с клетками в квадрате

1 голос
/ 10 марта 2019 

	var grid = document.getElementById("grid");
	var size = 50;

	for (var y = 0; y < size; y++) {
		var currentRow = grid.insertRow(0);
		for (var x = 0; x < size; x++) {
			var currentCell = currentRow.insertCell(-1);
			currentCell.style.height = currentCell.style.width = `calc(100vh / ${size})`;
			currentCell.style.backgroundColor = (x+y)%2 == 0 ? "Blue" : "Red";
		}
	}
body {
	margin: 0;
}

table#grid {
	border-collapse: collapse;
	height:	100%; 
}
<html>
	<body>
		<table id="grid" align="center"></table>
	</body>
</html>

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

<table>
    <tr>
        <td><img src='placeholder.png'></td>
        <td><img src='placeholder.png'></td>
    </tr>
    <tr>
        <td><img src='placeholder.png'></td>
        <td><img src='placeholder.png'></td>
    </tr>
</table>

И в CSS 

table {
    height: 100%;
}

img {
    height: 100%;
    width: auto;
    visibility: hidden
}

Любые идеи (которые не слишком исчерпаны)Изощренный) очень ценится.

1 Ответ

0 голосов
/ 11 марта 2019

Вы можете использовать CSS calc для расчета высоты и ширины, я не знаю, если это именно то, что вы хотите, но вы можете попробовать это здесь: 

.blue {
  background-color: blue;
}

.red {
  background-color: red; 
}

body {
    margin: 0;
}

td {
  height: calc(100vh / 2);
  width: calc(100vh / 2);
}

table {
    border-collapse: collapse;
}
<table>
    <tr>
        <td class="blue"></td>
        <td class="red"></td>
    </tr>
    <tr>
        <td class="red"></td>
        <td class="blue"></td>
    </tr>
</table>

Вы также можете добавить некоторый код JavaScript, если вам нужно изменить размер сетки, и рассчитать новую высоту и ширину каждой ячейки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...