Question

我想在网页中显示包含行号的源代码。（不幸的是我不能使用像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一样。我尝试使用各种CSS参数，例如overlay，width，{ {1}}但我没有从GitHub得到结果。

如何在没有滚动条的表格中滚动垂直长行？

（或者有没有更好的解决方案来显示没有表的行数的代码？我已经看到使用有序列表或textarea的解决方案，但它们也有问题。）

Answer 1

您需要为表格提供CSS table-layout:fixed;，以使其他属性生效。

但是，我不确定如何在不显示滚动条的情况下滚动它。但无论如何你的行数不会在他们自己的表格单元格中（所以即使代码行跨越多行，数字仍会匹配）？

修改：JSFiddle。你可以尝试隐藏滚动条。

Answer 2

尝试设置代码表单元格：

<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

HTML表格中长行的垂直滚动

2 个答案: