HTML表格中长行的垂直滚动条

我想用网页中的行号显示源代码。（遗憾的是我不能用现有的像google-code-prettify突出的部件，因为我必须用我自己的语法解析器。）HTML表格中长行的垂直滚动条

为了防止行号从副本&与我用一个表一行和两个单元的源代码粘贴：在第一个单元有行号，在第二个单元是源代码：

<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>

这工作，但我有很长的源代码行的问题：该表变得非常宽。如果我打破长线，左边的线号不再正确。

最好的解决办法是表是用户可以滚动宽的线条，就像this example from GitHub上线88我曾与各种CSS参数试过像overlay，width，white-space但我没有从GitHub的结果。

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

（或者是有一个更好的解决方案，而表中显示与线numers代码？我已经看到了使用一个有序列表或textarea的解决方案，但他们也有问题。）

来源

2013-02-14 Sonson123

那么什么是问题，列表和文字区域具有防止您的使用它们？你会注意到你链接的例子使用'div'元素作为行？ – 2013-02-14 14:32:13

尝试这样设置你的代码表细胞：

<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

来源

2013-02-14 14:28:14 Raad

谢谢，这工作（与滚动条，但我注意到，GitHub也使用滚动条）。 – Sonson123 2013-02-14 15:00:52

那么，如果它足够适合GitHub ... =） – Raad 2013-02-14 15:17:49

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

但我不确定如何让它滚动而不显示滚动条。但是，你的行号不会在他们自己的表格单元格中（因此即使代码行跨越多行，数字仍然会匹配）？编号：JSFiddle。不知何故，你可以尝试隐藏滚动条。

来源

2013-02-14 14:25:38

谢谢。使用'table-layout：fixed'和'overflow：scroll'我得到了希望的结果，但带有一个垂直滚动条。所有行号都放在* one *表单元格中（在GitHub示例中），所以代码不应该跨越多行。我将尝试删除滚动条或使用一行一行表行解决方案。 – Sonson123 2013-02-14 14:52:22

您需要查看隐藏滚动条的方法。 http://stackoverflow.com/questions/3296644/how-to-hide-scrollbar有一个在webkit浏览器中这样做的答案。 – 2013-02-14 14:55:45

HTML表格中长行的垂直滚动条

回答

相关问题