Вертикальная прокрутка длинных строк в таблице 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 без таблиц? Я видел решения, которые используют упорядоченный список или текстовое поле, но у них есть проблемы.)

источник

2013-02-14 Sonson123

Так что проблемы, которые перечислены и прокручиваемые есть, что мешает вашему используя их? И вы заметите, что в примере, на который вы ссылаетесь, используются элементы 'div' для строк? –

Попробуйте установить вашу код ячейку таблицы таким образом:

<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

Ну, если это достаточно для GitHub ... =) – Raad

Вы должны были бы дайте таблице CSS table-layout:fixed;, чтобы эти другие атрибуты вступили в силу.

Я не уверен, как бы вы это прокрутили, не показывая полосы прокрутки. Но будут ли ваши номера строк не находиться в своих собственных ячейках таблицы (так что, даже если бы строка кода охватывала несколько строк, числа все равно совпадут)?

Редактировать: JSFiddle. Вы могли бы как-то скрыть полосу прокрутки.

источник

2013-02-14 14:25:38

Спасибо. С 'table-layout: fixed' и' overflow: scroll' Я получаю желаемый результат, но с вертикальной полосой прокрутки. Все номера строк объединены в ячейку * one * таблицы (в примере GitHub), поэтому код не должен содержать несколько строк. Я попытаюсь удалить полосы прокрутки или использовать однострочное решение для одной строки. – Sonson123

Вам нужно будет изучить способ скрытия полосы прокрутки. http://stackoverflow.com/questions/3296644/how-to-hide-scrollbar имеет ответ с таким способом в браузерах webkit. –

Вертикальная прокрутка длинных строк в таблице HTML

ответ

Смежные вопросы