我正在尝试使用 HTML 为计算机视觉制作一个简单的矩阵可视化。我将图像表示为表格，将每个像素表示为 16x16 像素的 TD。代码很简单:
<!doctype html>
<html lang="en">
<head>
<style>
td {
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<table>
<tr>
<td>0.1</td>
(800 more cells)
</tr>
(600 more rows)
</table>
</body>
</html>当然，我最终得到了数百万个细胞。我不关心内存要求，只要单元格呈现为正方形即可。
但是，出于某种原因，在 Chrome 中，tds 忽略了固定的高度和提供的高度，而是适合它们的内容。
知道如何让单元格符合提供的大小吗？
为什么这不是重复:只有当浏览器必须在比屏幕宽的布局中呈现数百万个 DOM 节点时，才会发生此问题。它影响高度和宽度，原因可能与浏览器渲染系统有关。
最佳答案
尝试设置 max-height 和 max-width 而不是 height 和 width
td {
max-width: 16px;
max-height: 16px;
border: 1px solid black;
}<table>
<tr>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
(800 more cells)
</tr>
<tr>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
(800 more cells)
</tr>
<tr>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
<td>0.1</td>
</tr>
</table>关于具有数百万个单元格的 HTML 表格会忽略单元格的固定尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56063317/