python - Jupyter Notebook Pandas 데이터 프레임 HTML 인쇄물 복제

원하는 기능을 얻기 위해 코드를 약간 변경했습니다 :

Pandas 데이터 프레임은 테이블에 대한 두 개의 특수 HTML 태그, 즉 thead 로 스타일이 지정됩니다.  헤더와 tbody  몸을 위해. 이를 사용하여 강조 표시 동작을 본문 전용으로 지정할 수 있습니다

CSS에는 테이블에 음영 효과를 추가하는 데 사용할 수있는 "even"및 "odd"속성이 있습니다.

호버가 지정된 배경 음영으로 작업하려면 맨 처음이 아니라 마지막으로 호출되어야합니다.

주피터 노트 :

import pandas as pd
import numpy as np
from IPython.display import HTML
def hover(hover_color="#add8e6"):
    return dict(selector="tbody tr:hover",
            props=[("background-color", "%s" % hover_color)])
styles = [
    #table properties
    dict(selector=" ", 
         props=[("margin","0"),
                ("font-family",'"Helvetica", "Arial", sans-serif'),
                ("border-collapse", "collapse"),
                ("border","none"),
                ("border", "2px solid #ccf")
                   ]),
    #header color - optional
    dict(selector="thead", 
         props=[("background-color","#cc8484")
               ]),
    #background shading
    dict(selector="tbody tr:nth-child(even)",
         props=[("background-color", "#fff")]),
    dict(selector="tbody tr:nth-child(odd)",
         props=[("background-color", "#eee")]),
    #cell spacing
    dict(selector="td", 
         props=[("padding", ".5em")]),
    #header cell properties
    dict(selector="th", 
         props=[("font-size", "125%"),
                ("text-align", "center")]),
    #caption placement
    dict(selector="caption", 
         props=[("caption-side", "bottom")]),
    #render hover last to override background-color
    hover()
]
html = (df.style.set_table_styles(styles)
      .set_caption("Hover to highlight."))
html

...하지만 HTML 파일을 출력 할 때 여전히 아름답습니까? 예. CSS 스타일링을 더 올바르게 수행하여 글꼴 크기, 글꼴 모음, 텍스트 장식, 여백/패딩 등을 시작할 수 있지만 시작하면됩니다. 아래를 참조하십시오 :

print(html.render())

<style  type="text/css" >
    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc   {
          margin: 0;
          font-family: "Helvetica", "Arial", sans-serif;
          border-collapse: collapse;
          border: none;
          border: 2px solid #ccf;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc thead {
          background-color: #cc8484;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc tbody tr:nth-child(even) {
          background-color: #fff;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc tbody tr:nth-child(odd) {
          background-color: #eee;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc td {
          padding: .5em;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc th {
          font-size: 125%;
          text-align: center;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc caption {
          caption-side: bottom;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc tbody tr:hover {
          background-color: #add8e6;
    }</style>  
<table id="T_3e73cfd2_396c_11e8_9d70_240a645b34fc" ><caption>Hover to highlight.</caption> 
<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_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row0" class="row_heading level0 row0" rowspan=2>bar</th> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row0" class="row_heading level1 row0" >one</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow0_col0" class="data row0 col0" >-0.130634</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row1" class="row_heading level1 row1" >two</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow1_col0" class="data row1 col0" >1.17685</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row2" class="row_heading level0 row2" rowspan=2>baz</th> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row2" class="row_heading level1 row2" >one</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow2_col0" class="data row2 col0" >0.500367</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row3" class="row_heading level1 row3" >two</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow3_col0" class="data row3 col0" >0.555932</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row4" class="row_heading level0 row4" rowspan=2>foo</th> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row4" class="row_heading level1 row4" >one</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow4_col0" class="data row4 col0" >-0.744553</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row5" class="row_heading level1 row5" >two</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow5_col0" class="data row5 col0" >-1.41269</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row6" class="row_heading level0 row6" rowspan=2>qux</th> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row6" class="row_heading level1 row6" >one</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow6_col0" class="data row6 col0" >0.726728</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row7" class="row_heading level1 row7" >two</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow7_col0" class="data row7 col0" >-0.683555</td> 
    </tr></tbody> 
</table>