HTML table with millions of cells ignores cell's fixed dimensions

Question

I'm trying to use HTML to make a simple matrix visualization for computer vision. I'm representing the image as a TABLE and each pixel as a TD of 16x16px. The code is straightforward:

<!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>

Of course I end up with millions of cells. I don't care about memory requirements as long as the cells are rendered as squares.

However, in Chrome for some reason the tds are ignoring the fixed with and height provided and instead fit their contents.

Any idea how to make the cells respect the size provided?

Why this is not a duplicate: This problem only happens when the browser has to render millions of DOM nodes in a layout that's much wider than the screen. It affects both height and width and the reason probably relates to browser rendering systems.

Possible duplicate of [How to fix height of TR?](https://stackoverflow.com/questions/2092696/how-to-fix-height-of-tr) — WOUNDEDStevenJones, May 09 '19 at 16:05
Not at all, my problem is particular to containers that have to expand wider than the screen size. Also, I'd love to use a different element from a TABLE if that was possible at all (without knowing the container's width beforehand) — DanyAlejandro, May 09 '19 at 16:07
you need to add `table-layout:fixed`, related: https://stackoverflow.com/a/55259181/8620333 — Temani Afif, May 09 '19 at 20:34

score 2 · Answer 1 · answered May 09 '19 at 15:59

Try setting max-height and max-width instead of height and 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>

Your answer pointed me in the right direction. I ended up using min-width for the width, but for the height only line-height worked. Any idea why this doesn't work as it should? — DanyAlejandro, May 09 '19 at 16:05

HTML table with millions of cells ignores cell's fixed dimensions

1 Answers1