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表格中長行的垂直滾動條

回答

相關問題