0

我正在使用带有codehiliteandlineos选项的 Markdown 的 Python 实现。它产生如下代码：

<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>

这是一个有一行和两个单元格的表格；第一个单元格用于行号，第二个单元格用于实际代码。每个单元格的内容都在 a 中div，pre元素和span元素用于语法着色。

如果一行代码太长，我想显示一个水平滚动条，但我遇到了问题，因为它是一个表格。

理想情况下，我希望滚动条仅位于代码单元格td.code（我希望行号单元格 ( td.linenos) 与显示实际行号所需的长度一样长。

这是我当前的 CSS：

pre, code { overflow:auto; }

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

如果这是不可能的，那么我想在整行（tr）上有一个滚动条。但是上面的代码不适用于表格行。

4

2 回答 2

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

如果需要，这将使代码表单元格内的 div 具有水平滚动条。

于 2012-01-09T15:27:27.040 回答
0

并非所有这些都是必要的，但其中一些使它起作用。

出于某种原因，使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%;
}
于 2015-06-26T01:18:14.007 回答