我正在尝试使用HTML对计算机视觉进行简单的矩阵可视化.我将图像表示为TABLE,将每个像素表示为16x16px的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>