Question

Microsoft.EntityFrameworkCore

ticketNumber

	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";
		}
	}

我需要的是一个适合屏幕高度并且具有正方形单元格的表格。我尝试了几乎所有内容，这是使用隐藏图像获得的最佳结果。单元格几乎是平方的，尽管不足以满足我的需求。当然，我不想使用任何绝对间距。实际上，我也想只使用简单的CSS / JavaScript而无需图像。该表的大小将在运行时知道，但让我们假设它的大小为2：2。

body {
	margin: 0;
}

table#grid {
	border-collapse: collapse;
	height:	100%; 
}

在CSS中

<html>
	<body>
		<table id="grid" align="center"></table>
	</body>
</html>

非常感谢任何想法（不太复杂）。

Answer 1

您可以使用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代码。

HTML表格以平方单元格拟合屏幕高度

1 个答案: