Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: css inlining in as_raw_html() #498

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Conversation

rich-iannone
Copy link
Member

This addition to the as_raw_html() method adds the inline_css= argument. This option will inline CSS styles to the associated tags and remove the <style>...</style> block from the HTML fragment. It'll be helpful for situations where you'd need to include an HTML table in an email message body (requires CSS inlining) or for embedding a table in a larger HTML document (could help to preserve more of the table's styling properties).

Having this new feature requires a new dependency: css_inline. But it does a great job with CSS inlining both with a complete document and also with an HTML fragment (both modes are used here since there is a make_page= argument in as_raw_html()).

Here's an example for how this works in practice:

from great_tables import GT, md, style, loc
from great_tables.data import gtcars
import polars as pl

gtcars_mini = (
    pl.from_pandas(gtcars)
    .select(["mfr", "model", "msrp"])
    .head(5)
)

gt_tbl = (
    GT(gtcars_mini)
    .tab_header(
        title=md("Data listing from **gtcars**"),
        subtitle=md("gtcars is an R dataset")
    )
    .tab_style(
        style=style.fill(color="LightCyan"),
        locations=loc.body(columns="mfr")
    )
    .fmt_currency(columns="msrp")
    .tab_options(
        heading_background_color="Azure",
        table_body_hlines_color="Lavender",
        table_body_hlines_width="2px"
    )
    .opt_horizontal_padding(scale=2)
)

Here is the table HTML without the CSS-inlining:

print(gt_tbl.as_raw_html(inline_css=False))
<div id="dwjrrawiqe" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#dwjrrawiqe table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

#dwjrrawiqe thead, tbody, tfoot, tr, td, th { border-style: none; }
 tr { background-color: transparent; }
#dwjrrawiqe p { margin: 0; padding: 0; }
 #dwjrrawiqe .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
 #dwjrrawiqe .gt_caption { padding-top: 4px; padding-bottom: 4px; }
 #dwjrrawiqe .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
 #dwjrrawiqe .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
 #dwjrrawiqe .gt_heading { background-color: Azure; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
 #dwjrrawiqe .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
 #dwjrrawiqe .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
 #dwjrrawiqe .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
 #dwjrrawiqe .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
 #dwjrrawiqe .gt_column_spanner_outer:first-child { padding-left: 0; }
 #dwjrrawiqe .gt_column_spanner_outer:last-child { padding-right: 0; }
 #dwjrrawiqe .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
 #dwjrrawiqe .gt_spanner_row { border-bottom-style: hidden; }
 #dwjrrawiqe .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
 #dwjrrawiqe .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
 #dwjrrawiqe .gt_from_md> :first-child { margin-top: 0; }
 #dwjrrawiqe .gt_from_md> :last-child { margin-bottom: 0; }
 #dwjrrawiqe .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 2px; border-top-color: Lavender; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
 #dwjrrawiqe .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
 #dwjrrawiqe .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
 #dwjrrawiqe .gt_row_group_first td { border-top-width: 2px; }
 #dwjrrawiqe .gt_row_group_first th { border-top-width: 2px; }
 #dwjrrawiqe .gt_striped { background-color: rgba(128,128,128,0.05); }
 #dwjrrawiqe .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
 #dwjrrawiqe .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
 #dwjrrawiqe .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; text-align: left; }
 #dwjrrawiqe .gt_left { text-align: left; }
 #dwjrrawiqe .gt_center { text-align: center; }
 #dwjrrawiqe .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
 #dwjrrawiqe .gt_font_normal { font-weight: normal; }
 #dwjrrawiqe .gt_font_bold { font-weight: bold; }
 #dwjrrawiqe .gt_font_italic { font-style: italic; }
 #dwjrrawiqe .gt_super { font-size: 65%; }
 #dwjrrawiqe .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
 #dwjrrawiqe .gt_asterisk { font-size: 100%; vertical-align: 0; }
 
</style>
<table class="gt_table" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>

  <tr class="gt_heading">
    <td colspan="3" class="gt_heading gt_title gt_font_normal">Data listing from <strong>gtcars</strong></td>
  </tr>
  <tr class="gt_heading">
    <td colspan="3" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">gtcars is an R dataset</td>
  </tr>
<tr class="gt_col_headings">
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="mfr">mfr</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="model">model</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="msrp">msrp</th>
</tr>
</thead>
<tbody class="gt_table_body">
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ford</td>
    <td class="gt_row gt_left">GT</td>
    <td class="gt_row gt_right">$447,000.00</td>
  </tr>
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ferrari</td>
    <td class="gt_row gt_left">458 Speciale</td>
    <td class="gt_row gt_right">$291,744.00</td>
  </tr>
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ferrari</td>
    <td class="gt_row gt_left">458 Spider</td>
    <td class="gt_row gt_right">$263,553.00</td>
  </tr>
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ferrari</td>
    <td class="gt_row gt_left">458 Italia</td>
    <td class="gt_row gt_right">$233,509.00</td>
  </tr>
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ferrari</td>
    <td class="gt_row gt_left">488 GTB</td>
    <td class="gt_row gt_right">$245,400.00</td>
  </tr>
</tbody>


</table>

</div>

With inline_css=True, we get the styles inlined into the style attributes of the appropriate tags:

print(gt_tbl.as_raw_html(inline_css=True))
<div id="tkbclwafcy" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">

<table class="gt_table" data-quarto-bootstrap="false" data-quarto-disable-processing="false" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;display: table;border-collapse: collapse;line-height: normal;margin-left: auto;margin-right: auto;color: #333333;font-size: 16px;font-weight: normal;font-style: normal;background-color: #FFFFFF;width: auto;border-top-style: solid;border-top-width: 2px;border-top-color: #A8A8A8;border-right-style: none;border-right-width: 2px;border-right-color: #D3D3D3;border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #A8A8A8;border-left-style: none;border-left-width: 2px;border-left-color: #D3D3D3;">
<thead style="border-style: none;">

  <tr class="gt_heading" style="border-style: none;background-color: Azure;text-align: center;border-bottom-color: #FFFFFF;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;">
    <td class="gt_heading gt_title gt_font_normal" colspan="3" style="border-style: none;color: #333333;font-size: 125%;font-weight: normal;padding-top: 4px;padding-bottom: 4px;padding-left: 10px;padding-right: 10px;border-bottom-color: #FFFFFF;border-bottom-width: 0;background-color: Azure;text-align: center;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;">Data listing from <strong>gtcars</strong></td>
  </tr>
  <tr class="gt_heading" style="border-style: none;background-color: Azure;text-align: center;border-bottom-color: #FFFFFF;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;">
    <td class="gt_heading gt_subtitle gt_font_normal gt_bottom_border" colspan="3" style="border-style: none;color: #333333;font-size: 85%;font-weight: normal;padding-top: 3px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;border-top-color: #FFFFFF;border-top-width: 0;background-color: Azure;text-align: center;border-bottom-color: #D3D3D3;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;border-bottom-style: solid;border-bottom-width: 2px;">gtcars is an R dataset</td>
  </tr>
<tr class="gt_col_headings" style="border-style: none;background-color: transparent;border-top-style: solid;border-top-width: 2px;border-top-color: #D3D3D3;border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #D3D3D3;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;">
  <th class="gt_col_heading gt_columns_bottom_border gt_left" id="mfr" rowspan="1" colspan="1" scope="col" style="border-style: none;color: #333333;background-color: #FFFFFF;font-size: 100%;font-weight: normal;text-transform: inherit;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: bottom;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;overflow-x: hidden;text-align: left;">mfr</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" id="model" rowspan="1" colspan="1" scope="col" style="border-style: none;color: #333333;background-color: #FFFFFF;font-size: 100%;font-weight: normal;text-transform: inherit;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: bottom;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;overflow-x: hidden;text-align: left;">model</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" id="msrp" rowspan="1" colspan="1" scope="col" style="border-style: none;color: #333333;background-color: #FFFFFF;font-size: 100%;font-weight: normal;text-transform: inherit;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: bottom;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">msrp</th>
</tr>
</thead>
<tbody class="gt_table_body" style="border-style: none;border-top-style: solid;border-top-width: 2px;border-top-color: #D3D3D3;border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #D3D3D3;">
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ford</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">GT</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$447,000.00</td>
  </tr>
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ferrari</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">458 Speciale</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$291,744.00</td>
  </tr>
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ferrari</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">458 Spider</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$263,553.00</td>
  </tr>
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ferrari</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">458 Italia</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$233,509.00</td>
  </tr>
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ferrari</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">488 GTB</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$245,400.00</td>
  </tr>
</tbody>


</table>

</div>

Notice that the CSS-inliner does not remove existing style rules from tags. Rather styles from the <style> block are prepended to the existing rules.

Fixes: #497

Copy link

codecov bot commented Oct 24, 2024

Codecov Report

Attention: Patch coverage is 82.35294% with 3 lines in your changes missing coverage. Please review.

Project coverage is 87.85%. Comparing base (cc9829c) to head (5ad0ae3).

Files with missing lines Patch % Lines
great_tables/_export.py 82.35% 3 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #498      +/-   ##
==========================================
- Coverage   87.86%   87.85%   -0.01%     
==========================================
  Files          42       42              
  Lines        4852     4866      +14     
==========================================
+ Hits         4263     4275      +12     
- Misses        589      591       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add an inline CSS option to the as_raw_html method
1 participant