Отображение: ячейка таблицы не выравнивается по номерам строк

Я пытался создать html-страницу, которая отображает блок кода с номерами строк. Я использовал свойство CSS table-cell display для отображения строки вместе с номером строки в формате ячейки. Но строка отображается после номера строки, а я хочу, чтобы она была выровнена по той же строке. CSS Grid display работает правильно, однако в Chrome он не поддерживает более 1000 строк. Пожалуйста, помогите мне решить эту проблему.

pre {
  counter-reset: line 0;
  display: table-cell;
  grid-template-columns: min-content 1fr;
  grid-auto-rows: 1em;
  gap: 0.3em;
}

.line-number {
  text-align: right;
}

.line-number::before {
  counter-increment: line;
  content: counter(line);
  white-space: pre;
  color: #888;
  padding: 0 .5em;
  border-right: 1px solid #ddd;
}
<pre>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
</pre>

Вы должны установить display: table на тег контейнера (в вашем случае это pre) и display: table-cell на дочерний span

Вернуться на верх