我想在网页中显示带有行号的源代码。 （不幸的是，我不能使用现有的突出显示组件，例如google-code-prettify，因为我必须使用自己的语法解析器。）
为了防止行号与源代码一起复制和粘贴，我使用了具有一行和两个单元格的表：在第一个单元格中有行号，在第二个单元格中是源代码：
<html><body>
<table>
<tr>
<td>1<br/>2<br/>3</td>
<td>
<pre>int main() {
println("I am a very looooooooooooooooog source code line.")
}</pre>
</td>
</tr>
</table>
</body></html>
这行得通，但是我在源代码行较长时遇到了问题：表变得非常宽。如果我中断了长行，则左侧的行号不再正确。
最好的解决方案是创建一个表，让用户可以滚动宽行，就像在第88行上的this example from GitHub一样。来自GitHub的结果。
如何在没有滚动条的情况下滚动表格中的垂直长线？
（或者是否有更好的解决方案来显示不带表的行号代码？我见过使用有序列表或文本区域的解决方案，但它们也有问题。）
最佳答案
尝试这样设置代码表单元：
<td>
<div class="scrollable">
<pre>int main() {
println("I am a very looooooooooooooooog source code line.")
}</pre>
</div>
</td>
并上一堂课：
.scrollable {
overflow: scroll;
}
见How to create a table cell that scrolls when overflowing