Pandas styler CSS is ignored. How to include it?

[AlFontal]

Python 3.9 / .ipynb files

Pandas Styler allows a quite fine level of customization of pandas DataFrames, but quarto clashes quite a bit with it.

Problem 1

The dataframe class is not applied which causes the default table style to be really ugly.

Minimal example if we wanted, for instance to simply hide the axis (which is a really annoying feature of pandas and I'm happy to be moving to indexless polars soon, but in any case...)

from plotnine.data import mtcars

(mtcars
[['name', 'mpg', 'cyl']]
 .head()
 .style
 .hide_index()
)

This is easily solvable, however, by manually appending the dataframe class using the set_table_attributes method:

(mtcars
[['name', 'mpg', 'cyl']]
 .head()
 .style
 .hide_index()
 .set_table_attributes("class='dataframe'")
)

Annoying, but easy enough to fix manually, so not a big deal. However, what I have no idea how to resolve is the second problem:

Problem 2

When doing some more complex styling, pandas styler outputs an embedded CSS <style> tag to specify the styling of each individual element of the table by subclassing each cell and then applying styles to each of them.

For instance, a simple example highlighting the max values of each column, which can be done with:

(mtcars
[['name', 'mpg', 'cyl']]
 .head()
 .style
 .hide_index()
 .set_table_attributes("class='dataframe'")
 .highlight_max(color='red')
)

Renders in jupyter (or in my case in the built-in VS Code viewer):

In the rendered Quarto site, however, the background styling is completely lost:

Looking at the raw ipynb output is the following, clearly including the <style> tag:

Show raw ipynb

{
   "cell_type": "code",
   "execution_count": 293,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">\n",
       "#T_425d9_row1_col0, #T_425d9_row2_col1, #T_425d9_row4_col2 {\n",
       "  background-color: red;\n",
       "}\n",
       "</style>\n",
       "<table id=\"T_425d9\" class='dataframe'>\n",
       "  <thead>\n",
       "    <tr>\n",
       "      <th id=\"T_425d9_level0_col0\" class=\"col_heading level0 col0\" >name</th>\n",
       "      <th id=\"T_425d9_level0_col1\" class=\"col_heading level0 col1\" >mpg</th>\n",
       "      <th id=\"T_425d9_level0_col2\" class=\"col_heading level0 col2\" >cyl</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <td id=\"T_425d9_row0_col0\" class=\"data row0 col0\" >Mazda RX4</td>\n",
       "      <td id=\"T_425d9_row0_col1\" class=\"data row0 col1\" >21.000000</td>\n",
       "      <td id=\"T_425d9_row0_col2\" class=\"data row0 col2\" >6</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td id=\"T_425d9_row1_col0\" class=\"data row1 col0\" >Mazda RX4 Wag</td>\n",
       "      <td id=\"T_425d9_row1_col1\" class=\"data row1 col1\" >21.000000</td>\n",
       "      <td id=\"T_425d9_row1_col2\" class=\"data row1 col2\" >6</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td id=\"T_425d9_row2_col0\" class=\"data row2 col0\" >Datsun 710</td>\n",
       "      <td id=\"T_425d9_row2_col1\" class=\"data row2 col1\" >22.800000</td>\n",
       "      <td id=\"T_425d9_row2_col2\" class=\"data row2 col2\" >4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td id=\"T_425d9_row3_col0\" class=\"data row3 col0\" >Hornet 4 Drive</td>\n",
       "      <td id=\"T_425d9_row3_col1\" class=\"data row3 col1\" >21.400000</td>\n",
       "      <td id=\"T_425d9_row3_col2\" class=\"data row3 col2\" >6</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td id=\"T_425d9_row4_col0\" class=\"data row4 col0\" >Hornet Sportabout</td>\n",
       "      <td id=\"T_425d9_row4_col1\" class=\"data row4 col1\" >18.700000</td>\n",
       "      <td id=\"T_425d9_row4_col2\" class=\"data row4 col2\" >8</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n"
      ],
      "text/plain": [
       "<pandas.io.formats.style.Styler at 0x3341278e0>"
      ]
     },
     "execution_count": 293,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from plotnine.data import mtcars\n",
    "\n",
    "(mtcars\n",
    "[['name', 'mpg', 'cyl']]\n",
    " .head()\n",
    " .style\n",
    " .hide_index()\n",
    " .set_table_attributes(\"class='dataframe'\")\n",
    " .highlight_max(color='red')\n",
    ")"
   ]
  }

However, when quarto renders the HTML, the style/CSS tag is completely lost (id and class are still defined of course, but they match nothing in the defined stylesheets):

<div class="cell-output cell-output-display" data-execution_count="293">


<table id="T_425d9" class="dataframe table table-sm table-striped">
  <thead>
    <tr>
      <th id="T_425d9_level0_col0" class="col_heading level0 col0">name</th>
      <th id="T_425d9_level0_col1" class="col_heading level0 col1">mpg</th>
      <th id="T_425d9_level0_col2" class="col_heading level0 col2">cyl</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="T_425d9_row0_col0" class="data row0 col0">Mazda RX4</td>
      <td id="T_425d9_row0_col1" class="data row0 col1">21.000000</td>
      <td id="T_425d9_row0_col2" class="data row0 col2">6</td>
    </tr>
    <tr>
      <td id="T_425d9_row1_col0" class="data row1 col0">Mazda RX4 Wag</td>
      <td id="T_425d9_row1_col1" class="data row1 col1">21.000000</td>
      <td id="T_425d9_row1_col2" class="data row1 col2">6</td>
    </tr>
    <tr>
      <td id="T_425d9_row2_col0" class="data row2 col0">Datsun 710</td>
      <td id="T_425d9_row2_col1" class="data row2 col1">22.800000</td>
      <td id="T_425d9_row2_col2" class="data row2 col2">4</td>
    </tr>
    <tr>
      <td id="T_425d9_row3_col0" class="data row3 col0">Hornet 4 Drive</td>
      <td id="T_425d9_row3_col1" class="data row3 col1">21.400000</td>
      <td id="T_425d9_row3_col2" class="data row3 col2">6</td>
    </tr>
    <tr>
      <td id="T_425d9_row4_col0" class="data row4 col0">Hornet Sportabout</td>
      <td id="T_425d9_row4_col1" class="data row4 col1">18.700000</td>
      <td id="T_425d9_row4_col2" class="data row4 col2">8</td>
    </tr>
  </tbody>
</table>
</div>

Any ideas on a proper way of handling this?

[cscheid]

This should be fixed on main soon by #4088 .

(It's a regression from a change in how we handle raw HTML tables. Thanks for the report, sorry it slipped under my radar. Thanks @aborruso for noticing.)

[AlFontal]

That's great @cscheid!

[aborruso]

@AlFontal I am proud to have been able to bring this fundamental discussion of yours to @cscheid 's attention. It's something very important for all quarto users.