HTML-таблица с миллионами ячеек игнорирует фиксированные размеры ячейки - PullRequest
3 голосов
/ 09 мая 2019

Я пытаюсь использовать HTML, чтобы сделать простую матричную визуализацию для компьютерного зрения. Я представляю изображение в виде таблицы, а каждый пиксель - в виде TD 16x16 пикселей. Код прост:

<!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 игнорируют фиксированное значение с предоставленной высотой и высотой и вместо этого соответствуют их содержимому.

table ignoring width

Есть идеи, как заставить клетки соответствовать предоставленному размеру?

Почему это не дубликат: эта проблема возникает только тогда, когда браузер должен отображать миллионы узлов DOM в макете, который на шире , чем на экране. Это влияет как на высоту, так и на ширину, и причина, вероятно, связана с системами рендеринга в браузере.

1 Ответ

2 голосов
/ 09 мая 2019

Попробуйте установить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...