使用 CSS 使 HTML 表格中的项目根据屏幕大小呈正方形?

Question

我目前正在制作一个需要方形项目网格(数独(的电子应用程序。我在网上找到了使元素呈正方形的解决方案，但这是基于宽度的。而且很多时候宽度几乎是高度的两倍，所以基于这一点，网格项目会离开屏幕，我不喜欢这样。我试过使用

td{
height:11.11%;
padding-left:11.11%;
}

但它根本不会产生正方形，事实上，如果我这样做，高度在最小高度会变得静态。我的问题是如何使用 CSS 创建一个基于高度维护方形项目的表格？

Answer 1

您可以使用vh(视口高度(单位。1vh是视口高度的 1%。

编辑：添加代码示例。

td {
height: 33vh;
width: 33vh;
}

Answer 2

对于数独网格来说，表格可能不是一个好主意。表有一些限制，尤其是在大小调整方面。使用div 和简单的嵌套 css 网格构建它更容易。

这是一个粗略想法的小提琴：https://jsfiddle.net/Treverix/docy76gw/5/

CSS 如下所示：

.sudoku {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 0 0;
background-color: #2196F3;
padding: 5px;
width: 384px;
}
.sudoku-square {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
width: 126px;
height: 126px;
display: grid;
grid-template-columns: repeat(9, auto);
gap: 0 0;
}
.sudoku-cell {
border: 1px solid rgba(0, 0, 0, 0.5);
width: 12px;
height: 12px;
text-align: center;
}

Answer 3

td 是表格单元格对象，宽度会因为表格宽度而改变。

所以我编辑它，现在是正方形。 见下文

*{
padding: 0;
margin: 0;
}
table{
width: 100%;
border-collapse: collapse; 
}
td {
display: inline-block;
width: 20%;
padding-bottom: 20%;
/*
width: calc(20% - 2px);
padding-bottom: calc(20% - 2px);
background-color: #ff0000; 
border: 1px solid #000; 
*/
}
tr:nth-child(odd) td:nth-child(even){
background-color: #0ff;
}
tr:nth-child(odd) td:nth-child(odd){
background-color: #ff0;
}
tr:nth-child(even) td:nth-child(odd){
background-color: #0ff;
}
tr:nth-child(even) td:nth-child(even){
background-color: #ff0;
}

<table >
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>