Question

我正在尝试使用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节点时，才会发生此问题。它会影响高度和宽度，其原因可能与浏览器渲染系统有关。

Answer 1

尝试设置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表忽略单元格的固定尺寸

1 个答案: