CSS样式的pygments HTML

Question

我使用Python库pygments来对一些代码进行pygmentized，将它放在我创建的网站上。 我看过很多网站都显示代码，但是当代码包含一条长行时，溢出就会被隐藏起来。我不喜欢它被隐藏，并希望使容器可滚动。但是，当我添加CSS规则时：

.highlighttable {
    margin: auto;
    max-width: 75vw;
}

.highlighttable .code {
    max-width: calc(74vw - 100px);
    overflow: auto;
}

整件事看起来像这样：

我猜这里发生了以下情况：

• 滚动条计算为.code div元素的大小。
• 包含div的.code的大小增长
• 包含行号的div在某种程度上垂直位于中间

所以我尝试添加以下CSS规则：

.linenodiv {
    vertical-align: top;
}

.linenodiv pre {
    vertical-align: top;
}

但是到了没有问题，行号div仍然会移动，如屏幕截图所示。以下是整个表格的HTML代码：

<table class="highlighttable">
    <tbody>
        <tr>
            <td class="linenos">
                <div class="linenodiv">
                    <pre>1
2
3
4
5
6</pre>

                </div>
            </td>
            <td class="code">
                <div class="highlight">
                    <pre><span class="k">class</span> <span class="nc">TestClass</span><span class="p">:</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="k">pass</span>

<span class="k">def</span> <span class="nf">test_method</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">arg1</span><span class="p">,</span> <span class="n">arg1</span><span class="p">,</span> <span class="n">arg1</span><span class="p">):</span>
<span class="k">print</span><span class="p">(</span><span class="n">arg1</span><span class="p">)</span>
</pre>
                </div>
            </td>
        </tr>
    </tbody>
</table>

我减少了此代码中arg1的数量，因为它只显示了html代码的结构。

如何将行号div重新调整？

修改＃1

这是jsfiddle

似乎jsfiddle没有像我的计算机上的Firefox那样处理css溢出属性。 jsfiddle根本不会为overflow: auto;呈现滚动条，并且在那里看不到问题。相反，它将文本写在div之外，就好像有一个overflow: visible;

Answer 1

问题在于我没有申请

vertical-align: top;

到正确的元素。我现在将其应用于td，其中.linenos类可见：enter link description here

感谢@PDKnight，您的输入让我检查了当我将它应用于该td元素时会发生什么。