带行号的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）上的滚动条。但上面的代码不适用于表格行。

答

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

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

我认为这是更接近比我已经得到了，但现在'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%; 
}

带行号的Pygments HTML表格 - 代码单元格的水平滚动条

相关推荐