0

私は Markdown の Python 実装codehiliteとlineosオプションを使用しています。次のようなコードが生成されます。

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

これは、1 つの行と 2 つのセルからなるテーブルです。最初のセルは行番号用で、2 番目のセルは実際のコード用です。各セルの内容はdivandpre要素内にあり、span要素は構文の色付けに使用されます。

コード行が長すぎる場合に備えて水平スクロールバーを表示したいのですが、テーブルなので問題があります。

理想的には、コード セル ( ) だけにスクロールバーが必要ですtd.codeが、これは、テーブルの幅を 100% に設定した場合にのみ機能し、両方のセルが 50% 長くなります。行番号のセル ( 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 に答える