Display: table-cell not aligning with the line numbers

Question

I have been trying to build a html page which shows a code block with line numbers. I have used CSS table-cell display property to display the line along with line number in cell format. But the line gets displayed after the line number and I want it to be aligned in the same line. CSS Grid display works properly however with Chrome it doesn't support more than 1000 lines. Please help me resolve this issue.

 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>

Answer 1

您应该将display: table设置为容器标签（在您的情况下它是 pre）并将display: table-cell设置为子跨度