>
주피터가 노트북의 팬더 데이터 프레임에 사용하는 출력을 html/css/js로 복제하여 Flask jsonify 에서 반환 할 수 있도록하려고합니다.  나중에 AJAX 호출에 사용하는 html로.

이 및 이, CSS 해킹 대신 팬더 내장 스타일 기능 사용을 제안했지만 원하는 기능을 얻는 데 어려움을 겪고 있습니다.

def hover(hover_color="#add8e6"):
    return dict(selector="tr:hover",
                props=[("background-color", "%s" % hover_color)])
styles = [
    hover(),
    dict(selector="th", props=[("font-size", "125%"),
                               ("text-align", "center"),
                               ("padding", "5px 5px")]),
    dict(selector="tr", props=[("text-align", "center")]),
    dict(selector="caption", props=[("caption-side", "bottom")])
]
# creating some dummy data
index = pd.MultiIndex(levels=[['bar', 'baz', 'foo', 'qux'], ['one', 'two']],
                      labels=[[0, 0, 1, 1, 2, 2, 3, 3], [0, 1, 0, 1, 0, 1, 0, 1]],
                      names=['first', 'second'])
df = pd.DataFrame(data=np.random.randn(8), index=index)
# you'll see the html rendered bellow
df.style.set_table_styles(styles).set_caption("test").render()

주피터 노트북과 비교할 때 일부 기본 배경색 제거가 누락되어 있으며 헤더에 호버 클래스를 적용하지 않아야합니다. 선택 요소에 무언가를 적용 할 수있는 유일한 방법은 class= 를 추가하는 것입니다.  또는 id=  그러나 스타일 기능은 모든 것을 숨 깁니다.

<style  type="text/css" >     #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 tr:hover {           background-color: #add8e6;     }    #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 th {           font-size: 150%;           text-align: center;     }    #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 caption {           caption-side: bottom;     }</style>   <table id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2" ><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_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row0" class="row_heading level0 row0" rowspan=2>bar</th>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row0" class="row_heading level1 row0" >one</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row0_col0" class="data row0 col0" >-0.0690895</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row1" class="row_heading level1 row1" >two</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row1_col0" class="data row1 col0" >-0.518092</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row2" class="row_heading level0 row2" rowspan=2>baz</th>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row2" class="row_heading level1 row2" >one</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row2_col0" class="data row2 col0" >-0.163842</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row3" class="row_heading level1 row3" >two</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row3_col0" class="data row3 col0" >-0.144757</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row4" class="row_heading level0 row4" rowspan=2>foo</th>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row4" class="row_heading level1 row4" >one</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row4_col0" class="data row4 col0" >1.22865</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row5" class="row_heading level1 row5" >two</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row5_col0" class="data row5 col0" >1.83947</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row6" class="row_heading level0 row6" rowspan=2>qux</th>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row6" class="row_heading level1 row6" >one</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row6_col0" class="data row6 col0" >0.793328</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row7" class="row_heading level1 row7" >two</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row7_col0" class="data row7 col0" >-0.723836</td>      </tr></tbody>  </table>


  • 답변 # 1

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

    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>
    
    

관련 자료

  • 이전 excel - Msgbox를 활성화하기위한 셀 값 비교
  • 다음 javascript - Visual Studio에서 데이터베이스에서 데이터를 가져 오는 동안 HTML 행을 클릭 가능하게 만드는 방법 (C # 사용)