Locating default .css used by jupyter notebook for dataframe

Question

I have looked quite a bit and found (so many) tutorials/instructions on how to modify .css file in Jupyter/IPython by using static/custom/custom.css file.

My problem is the opposite: I would like to locate the default template that is used by notebook to use it as a template for another .css file.

More precisely : I am exporting my dataframe by using either panda's df.to_html() or df.style().render().

In both cases, when I open the resulting .html file in a browser, the dataframe looks a lot worse than it did when I preview it in my notebook. I am assuming that it is simply that Jupyter Notebook uses a stylesheet that my new html file does not know about.

Where is the default .css file?

Bonus points if you could tell me what is the name of this default theme, I feel like it would have made my search much easier.

I can't post a screenshot but will be happy to modify my question with more specific details if needed.

Davidzyx · Accepted Answer · 2020-09-09 02:45:46Z

It took me a while to find it, but here it is, renderedhtml.less. I believe it contains all the styles needed for the notebook cell outputs. So you only need to copy the table related parts (I highlighted them) to whatever CSS template you are using.

Here's a sample from my other answer on roughly the same topic:

<style  type="text/css" >
    table {
      border: none;
      border-collapse: collapse;
      border-spacing: 0;
      color: black;
      font-size: 12px;
      table-layout: fixed;
    }
    thead {
      border-bottom: 1px solid black;
      vertical-align: bottom;
    }
    tr, th, td {
      text-align: right;
      vertical-align: middle;
      padding: 0.5em 0.5em;
      line-height: normal;
      white-space: normal;
      max-width: none;
      border: none;
    }
    th {
      font-weight: bold;
    }
    tbody tr:nth-child(odd) {
      background: #f5f5f5;
    }
    tbody tr:hover {
      background: rgba(66, 165, 245, 0.2);
    }
</style><table id="T_32dd1d4a_f245_11ea_977b_005056813a0d" ><thead>    <tr>        <th class="blank" ></th>        <th class="blank level0" ></th>        <th class="col_heading level0 col0" >0</th>    </tr>    <tr>        <th class="index_name level0" >first</th>        <th class="index_name level1" >second</th>        <th class="blank" ></th>    </tr></thead><tbody>
                <tr>
                        <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel0_row0" class="row_heading level0 row0" rowspan=2>bar</th>
                        <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel1_row0" class="row_heading level1 row0" >one</th>
                        <td id="T_32dd1d4a_f245_11ea_977b_005056813a0drow0_col0" class="data row0 col0" >-0.466253</td>
            </tr>
            <tr>
                                <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel1_row1" class="row_heading level1 row1" >two</th>
                        <td id="T_32dd1d4a_f245_11ea_977b_005056813a0drow1_col0" class="data row1 col0" >-0.579658</td>
            </tr>
            <tr>
                        <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel0_row2" class="row_heading level0 row2" rowspan=2>baz</th>
                        <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel1_row2" class="row_heading level1 row2" >one</th>
                        <td id="T_32dd1d4a_f245_11ea_977b_005056813a0drow2_col0" class="data row2 col0" >1.868159</td>
            </tr>
            <tr>
                                <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel1_row3" class="row_heading level1 row3" >two</th>
                        <td id="T_32dd1d4a_f245_11ea_977b_005056813a0drow3_col0" class="data row3 col0" >0.392282</td>
            </tr>
            <tr>
                        <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel0_row4" class="row_heading level0 row4" rowspan=2>foo</th>
                        <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel1_row4" class="row_heading level1 row4" >one</th>
                        <td id="T_32dd1d4a_f245_11ea_977b_005056813a0drow4_col0" class="data row4 col0" >-2.427858</td>
            </tr>
            <tr>
                                <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel1_row5" class="row_heading level1 row5" >two</th>
                        <td id="T_32dd1d4a_f245_11ea_977b_005056813a0drow5_col0" class="data row5 col0" >-0.813941</td>
            </tr>
            <tr>
                        <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel0_row6" class="row_heading level0 row6" rowspan=2>qux</th>
                        <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel1_row6" class="row_heading level1 row6" >one</th>
                        <td id="T_32dd1d4a_f245_11ea_977b_005056813a0drow6_col0" class="data row6 col0" >0.110564</td>
            </tr>
            <tr>
                                <th id="T_32dd1d4a_f245_11ea_977b_005056813a0dlevel1_row7" class="row_heading level1 row7" >two</th>
                        <td id="T_32dd1d4a_f245_11ea_977b_005056813a0drow7_col0" class="data row7 col0" >0.834701</td>
            </tr>
    </tbody></table>

Collectives™ on Stack Overflow

Locating default .css used by jupyter notebook for dataframe

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related