如何使用 nbconvert 在 jupyter notebook 的 html 输出中添加垂直滚动条？

Question

我正在使用 jupyter 自动化一些报告并将其导出到 html。我有一些大 table，我想在 table 的右侧添加一个滚动条。类似的问题在这里：How to get a vertical scrollbar in HTML output from Jupyter notebooks。这是一个可重现的例子：

    import pandas as pd
    import numpy as np

    pd.set_option('display.max_columns', None)
    pd.set_option('display.max_rows', None)

    np.random.seed(2021)

    df = pd.DataFrame({'type': ['a'] * 50 + ['b'] * 50,
              'var_1': np.random.normal(size=100),
              'var_2': np.random.normal(size=100)})

我认为可以使用 .css 样式来完成，但我很难应用它。 Pandas 有一些有用的方法来设置 tables (https://pandas.pydata.org/pandas-docs/stable/user_guide/style.html) 的样式。然后，我尝试了以下操作：

   vscrollbar = {
     'selector': 'div.output_html',
     'props': ' height: 500px; overflow-y: scroll;'
   }

   df.style.set_table_styles([vscrollbar])

之后，我使用

从 CLI 编译笔记本

   jupyter-nbconvert example.ipybn --to-html

输出不显示右侧滚动条。但是如果我检查 html 代码，我通过 throw Pandas 的样式就在那里

...
<style type="text/css">
#T_e24f1_ table {
  height: 500px;
  overflow-y: scroll;
}
</style>
<table id="T_e24f1_">
  <thead>
    <tr>
      <th class="blank level0">&nbsp;</th>
      <th class="col_heading level0 col0">type</th>
      <th class="col_heading level0 col1">var_1</th>
      <th class="col_heading level0 col2">var_2</th>
    </tr>
  </thead>
  <tbody>
...

我不知道我是否传递了正确的选择器，或者 jupyter 是否正在覆盖此样式。

如何在 jupyter nbconvert 的 html 输出中获得长 tables 的右滚动条？

Answer 1

实现垂直滚动条的一个选项是使用以下代码：

display(HTML("<div style='height: 200px'>" + df.style.render() + "</div>"))

您可以随意更改滚动条的布局和位置。输出如下所示：

Answer 2

这里列出了您应该知道的事情。

selector 是一种可以帮助您 select html 中的一个或多个元素的方法。因此，也许您需要了解如何使用它。以你为例。它应该是 ''，因为，如果你曾经检查过 ipynb 中的代码输出，你将看到如下所示。

#T_f2ffe_  div.output_html{
  height: 500px;
  overflow-y: scroll;
}

第一部分#T_f2ffe_是pandas随机生成的，第二部分div.output_html是自己写的。这些 selectors 将工作 together，这将导致您不指定任何元素

html中的一个table，它的高度是从td的高度和td的个数两方面计算的。如果你想让css height起作用，你最好先加上display:inline-block。

所以这里是最终的答案，只需稍作改动即可。

vscrollbar = {
 'selector': '',
 'props': ' height: 500px; overflow-y: scroll;display: inline-block;'
}

df.style.set_table_styles([vscrollbar])

而 html 看起来像。

如何使用 nbconvert 在 jupyter notebook 的 html 输出中添加垂直滚动条？

How to add a vertical scrollbar in html output from jupyter notebook with nbconvert?

scrollbar

longtable

pandas

jupyter

nbconvert