帶行號的Pygments HTML表格 - 代碼單元格的水平滾動條

我正在使用Markdown的Python實現，codehilite和lineos選項。它產生這樣的代碼：帶行號的Pygments HTML表格 - 代碼單元格的水平滾動條

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

這是一行和兩個單元格的表;第一個單元格用於行號，第二個單元格用於實際代碼。每個單元格的內容位於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）上的滾動條。但上面的代碼不適用於表格行。

來源

2012-01-09 usr

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

這將使代碼表單元格內的div具有水平滾動條，如果需要的話。

來源

2012-01-09 15:27:27 daveyfaherty

我認爲這是更接近比我已經得到了，但現在'td.code'細胞是隻要一個過長的行，除非我設置表格的寬度爲100％，這再次攪亂細胞。只有當我將'.codehilite'的寬度設置爲小於100％時才顯示滾動條。 – usr 2012-01-09 15:50:55

啊，我明白你的意思了。是否有理由不能在桌子上設置特定的寬度？ – daveyfaherty 2012-01-10 12:11:03

並非所有這些都是必要的，但其中一些使它工作。

由於某種原因，使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-26 01:18:14 coreyzev

帶行號的Pygments HTML表格 - 代碼單元格的水平滾動條

回答

相關問題