Pygments HTML table with line numbers - horizontal scrollbar for the code cell

Question

I'm using Python implementation of Markdown with codehilite and lineos option. It produces a code like this:

<table class="codehilitetable">
    <tr>
        <td class="linenos">
            <div class="linenodiv">
                <pre>1
                     2</pre>
            </div>
        </td>
        <td class="code"><div class="codehilite"><pre>
            <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>
        </pre></div></td>
    </tr>
</table>

This is a table with one row and two cells; first cell is for line numbers and second is cell is for actual code. The contents of each cell are inside a div and pre element and span elements are used for syntax coloring.

I would like to display a horizontal scrollbar in case a line of code is too long, but I'm having problems, because it's a table.

Ideally I'd want the scrollbar just on the code cell (td.code), but this only works if set width of the table to 100%, which makes both cells long 50%. I want the line-number cell (td.linenos) to be just as long as it's required for the actual line-numbers to be shown.

Here's my current CSS:

pre, code { overflow:auto; }

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

If this is not possible, then I'd like to have a scrollbar on the whole row (tr). But the above code doesn't work on table rows.

score 0 · Answer 1 · answered Jun 26 '15 at 01:18

Not all of this is necessary, but some of this made it work.

for some reason making the pre container really small made it scroll properly.

.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%;
}

score 0 · Answer 2 · answered Jan 09 '12 at 15:27

0

.codehilite{
          width:100%;
          height: auto;
          overflow: auto;
        }

That will make the div inside the code table cell have a horizontal scrollbar if needed.

answered Jan 09 '12 at 15:27

daveyfaherty

4,585
2
27
42

I think that's closer than I've gotten, but now `td.code` cell is as long as a too-long line unless I set width of the table to 100%, which again messes up the cells. And scrollbar is shown only if I set width of `.codehilite` to something less than 100%. – usr Jan 09 '12 at 15:50
Ah, I see what you mean. Is there a reason you can't set a specific width on the table? – daveyfaherty Jan 10 '12 at 12:11

Pygments HTML table with line numbers - horizontal scrollbar for the code cell

2 Answers2