pandas DataFrame to html with inline styles instead of CSS

Question

I am trying to send a pandas DataFrame as HTML as part of an email. I was trying to use something like

import pandas as pd

df = pd.DataFrame({1: [1, 2, 3], 2: [4, 5, 6]})

def style_map(x):
    return 'color: red' if x == 1 else 'color: blue'

styled_df = df.style.applymap(style_map).render()

and then add styled_df to the remaining HTML. However, this method uses CSS to style the table, and the output looks like this:

<style  type="text/css" >
    #T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row0_col0 {
            color:  red;
        }    #T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row0_col1 {
            color:  blue;
        }    #T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row1_col0 {
            color:  blue;
        }    #T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row1_col1 {
            color:  blue;
        }    #T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row2_col0 {
            color:  blue;
        }    #T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row2_col1 {
            color:  blue;
        }</style><table id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4" ><thead>    <tr>        <th class="blank level0" ></th>        <th class="col_heading level0 col0" >1</th>        <th class="col_heading level0 col1" >2</th>    </tr></thead><tbody>
                <tr>
                        <th id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4level0_row0" class="row_heading level0 row0" >0</th>
                        <td id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row0_col0" class="data row0 col0" >1</td>
                        <td id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row0_col1" class="data row0 col1" >4</td>
            </tr>
            <tr>
                        <th id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4level0_row1" class="row_heading level0 row1" >1</th>
                        <td id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row1_col0" class="data row1 col0" >2</td>
                        <td id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row1_col1" class="data row1 col1" >5</td>
            </tr>
            <tr>
                        <th id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4level0_row2" class="row_heading level0 row2" >2</th>
                        <td id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row2_col0" class="data row2 col0" >3</td>
                        <td id="T_3627a1a0_4fb7_11e9_9bf9_33657f3526e4row2_col1" class="data row2 col1" >6</td>
            </tr>
    </tbody></table>

in which case the styles will be ignored by most email clients.

My question is: is there an (easy?) way to move the style information into the style= attributes of the individual cells?

fuglede · Accepted Answer · 2019-03-26 12:05:05Z

One approach would be to combine Pandas' own styling with a Python module for turning CSS into inline styles (cf. e.g. this SO post).

For instance, using premailer:

In [1]: from premailer import transform

In [2]: import pandas as pd
   ...:
   ...: df = pd.DataFrame({1: [1, 2, 3], 2: [4, 5, 6]})
   ...:
   ...: def style_map(x):
   ...:     return 'color: red' if x == 1 else 'color: blue'
   ...:
   ...: styled_df = df.style.applymap(style_map).render()

In [4]: print(transform(styled_df))
<html><head></head><body><table id="T_47851dee_4fbf_11e9_9c6a_f5d370129713"><thead>    <tr>        <th class="blank level0"></th>        <th class="col_heading level0 col0">1</th>        <th class="col_heading level0 col1">2</th>    </tr></thead><tbody>
                <tr>
                        <th id="T_47851dee_4fbf_11e9_9c6a_f5d370129713level0_row0" class="row_heading level0 row0">0</th>
                        <td id="T_47851dee_4fbf_11e9_9c6a_f5d370129713row0_col0" class="data row0 col0" style="color:red">1</td>
                        <td id="T_47851dee_4fbf_11e9_9c6a_f5d370129713row0_col1" class="data row0 col1" style="color:blue">4</td>
            </tr>
            <tr>
                        <th id="T_47851dee_4fbf_11e9_9c6a_f5d370129713level0_row1" class="row_heading level0 row1">1</th>
                        <td id="T_47851dee_4fbf_11e9_9c6a_f5d370129713row1_col0" class="data row1 col0" style="color:blue">2</td>
                        <td id="T_47851dee_4fbf_11e9_9c6a_f5d370129713row1_col1" class="data row1 col1" style="color:blue">5</td>
            </tr>
            <tr>
                        <th id="T_47851dee_4fbf_11e9_9c6a_f5d370129713level0_row2" class="row_heading level0 row2">2</th>
                        <td id="T_47851dee_4fbf_11e9_9c6a_f5d370129713row2_col0" class="data row2 col0" style="color:blue">3</td>
                        <td id="T_47851dee_4fbf_11e9_9c6a_f5d370129713row2_col1" class="data row2 col1" style="color:blue">6</td>
            </tr>
    </tbody></table></body></html>

Collectives™ on Stack Overflow

pandas DataFrame to html with inline styles instead of CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related