HTML-таблица фрагментов с номерами строк - горизонтальная полоса прокрутки для ячейки кода - PullRequest
Новая
       10

HTML-таблица фрагментов с номерами строк - горизонтальная полоса прокрутки для ячейки кода

0 голосов
/ 09 января 2012

Я использую реализацию Markdown в Python с опцией codehilite и lineos.Он производит код, подобный этому: 


    
        
            
                1
                     2
            <span class="k">def</span>
            <span class="nf">func</span>
            <span class="p">(</span>
            <span class="n">n</span>
            <span class="p">):</span>
            <span class="k">return</span>
            <span class="n">n</span> 
            <span class="o">**</span>
            <span class="mi">2</span>
            <span class="o">+</span>
            <span class="mi">3</span>
            <span class="o">*</span>
            <span class="n">n</span>
            <span class="o">+</span>
            <span class="mi">1</span>

Это таблица с одной строкой и двумя ячейками;первая ячейка для номеров строк, а вторая ячейка для фактического кода.Содержимое каждой ячейки находится внутри элемента div и pre, а элементы span используются для окрашивания синтаксиса.

Я хотел бы отобразить горизонтальную полосу прокрутки, если строка кода слишком длинная, но у меня проблемы, потому что это таблица.

В идеале, я бы хотел, чтобы полоса прокрутки просто на ячейке кода (td.code), но это работает, только если установить ширину таблицы на 100%, что делает обе клетки длинными 50%.Я хочу, чтобы ячейка с номером строки (td.linenos) была такой же длины, сколько требуется для отображения фактических номеров строки.

Вот мой текущий CSS: 

pre, code { overflow:auto; }

table.codehilitetable { table-layout: fixed; white-space: nowrap; width:100%; }

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

Ответы [ 2 ]

0 голосов
/ 26 июня 2015

Не все это необходимо, но кое-что заставило его работать.

по какой-то причине из-за того, что контейнер pre стал очень маленьким, он правильно прокрутился. 

.codehilite pre, .codehilitetable .linenodiv pre {
    font-size: 1em;
    line-height: 1.4em;
}
table.docutils, table.docutils tbody, table.docutils tr, table.docutils td {
    width: 100%;
    max-width: 100%;
    display: block;
}
.codehilitetable td.linenos, .codehilitetable .linenodiv pre {
    padding: 0;
    border-right: none;
    display: table-cell;
    width: 50px;
}
.codehilitetable td.code {
    display: table-cell;
    overflow-x: scroll !important;
}
.codehilitetable td.code .codehilite{
    max-width: 100%;
}
.codehilitetable td.code .codehilite pre {
    width: 10px;
    max-width: 100%;
}
0 голосов
/ 09 января 2012 
.codehilite{
          width:100%;
          height: auto;
          overflow: auto;
        }

Это позволит сделать div внутри ячейки таблицы кодов горизонтальной полосой прокрутки, если необходимо.

...