Блог

Главная - Вопросы по программированию - Отображение: таблица-ячейка, не совпадающая с номерами строк

Отображение: таблица-ячейка, не совпадающая с номерами строк

#javascript #html #css #django

Вопрос:

Я пытался создать html — страницу, которая показывает блок кода с номерами строк. Я использовал свойство отображения ячеек таблицы CSS для отображения строки вместе с номером строки в формате ячейки. Но строка отображается после номера строки, и я хочу, чтобы она была выровнена в той же строке. Отображение сетки CSS работает правильно, однако в 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>

Ответ №1:

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

Комментарии:

1. Спасибо. Я попробовал использовать display: таблица под pre и display: ячейка таблицы под номером строки, но в результате все это печатается в одной строке.

2. не могли бы вы помочь, поделившись кодом?

Метки: ,