Python DataFrame HTML在Jupyter外显示

Question

我想创建一个包含数据框的html文件（例如'my_file.html'），我想拥有类似于jupyter的dataframe的续订，即

from IPython.display import display
from pandas import Timestamp
df = pd.DataFrame({'new': {Timestamp('2008-09-01 00:00:00'): 0.0,
                           Timestamp('2008-09-02 00:00:00'): -0.0},
                   'old': {Timestamp('2008-09-01 00:00:00'): 0.0,
                           Timestamp('2008-09-02 00:00:00'): -0.0},
                   'diff':{Timestamp('2008-09-01 00:00:00'): 0.0,
                           Timestamp('2008-09-02 00:00:00'): 0.0}})
display(df)

但是当我做

时

df.to_html('my_file.html')

升级是一个简单的表，没有jupyter格式

<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }
    .dataframe tbody tr th {
        vertical-align: top;
    }
    .dataframe thead th {
        text-align: right;
    }
</style>
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: center;">
      <th></th>
      <th>new</th>
      <th>old</th>
      <th>diff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2008-09-01</th>
      <td>0.0000</td>
      <td>0.0000</td>
      <td>0.0000</td>
    </tr>
    <tr>
      <th>2008-09-02</th>
      <td>-0.0000</td>
      <td>-0.0000</td>
      <td>0.0000</td>
    </tr>
  </tbody>
</table>
</div>

任何想法如何修改代码以使显示与Jupyter相似？

Answer 1

jupyter CSS样式表是优美桌子的原因。您可以从Jupyter的index.css文件中复制相关的css规则。制作样式表后，将df.to_html()的输出包装在<div>中。

<div class="p-Widget jp-RenderedHTMLCommon jp-RenderedHTML jp-mod-trusted jp-OutputArea-output" data-mime-type="text/html">
<!-- Output of df.to_html() -->
</div>

这是带有您的示例输出的制作样式表：

/* jupyterlab/packages/theme-light-extension/style/variables.css */
:root {
  --jp-ui-font-color0: rgba(0, 0, 0, 1);
  --jp-ui-font-color1: rgba(0, 0, 0, 0.87);
  --jp-layout-color0: white;
  --jp-rendermime-error-background: #fdd;
  --jp-rendermime-table-row-background: #ddd;
  --jp-rendermime-table-row-hover-background: #aaa;
}
/* Tables */
.jp-RenderedHTMLCommon table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  color: var(--jp-ui-font-color1);
  font-size: 12px;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
}
.jp-RenderedHTMLCommon thead {
  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
  vertical-align: bottom;
}
.jp-RenderedHTMLCommon td,
.jp-RenderedHTMLCommon th,
.jp-RenderedHTMLCommon tr {
  vertical-align: middle;
  padding: 0.5em 0.5em;
  line-height: normal;
  white-space: normal;
  max-width: none;
  border: none;
}
.jp-RenderedMarkdown.jp-RenderedHTMLCommon td,
.jp-RenderedMarkdown.jp-RenderedHTMLCommon th {
  max-width: none;
}
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon td,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon th,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon tr {
  text-align: right;
}
.jp-RenderedHTMLCommon th {
  font-weight: bold;
}
.jp-RenderedHTMLCommon tbody tr:nth-child(odd) {
  background: var(--jp-layout-color0);
}
.jp-RenderedHTMLCommon tbody tr:nth-child(even) {
  background: var(--jp-rendermime-table-row-background);
}
.jp-RenderedHTMLCommon tbody tr:hover {
  background: var(--jp-rendermime-table-row-hover-background);
}
.jp-RenderedHTMLCommon table {
  margin-bottom: 1em;
}
.jp-RenderedHTMLCommon p {
  text-align: left;
  margin: 0px;
}
.jp-RenderedHTMLCommon p {
  margin-bottom: 1em;
}

<div class="p-Widget jp-RenderedHTMLCommon jp-RenderedHTML jp-mod-trusted jp-OutputArea-output" data-mime-type="text/html">
<style scoped="">
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }
    .dataframe tbody tr th {
        vertical-align: top;
    }
    .dataframe thead th {
        text-align: right;
    }
</style>
<table class="dataframe" border="1">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>new</th>
      <th>old</th>
      <th>diff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2008-09-01</th>
      <td>0.0</td>
      <td>0.0</td>
      <td>0.0</td>
    </tr>
    <tr>
      <th>2008-09-02</th>
      <td>-0.0</td>
      <td>-0.0</td>
      <td>0.0</td>
    </tr>
  </tbody>
</table>
</div>