Question

I’m building some interactive workflows in IPython using the fantastic Notebook for interactive analysis and Pandas.

Some of the tables I’m displaying would be much easier to read with a little bit of formatting. I’d really like something like “zebra tables” where every other row is shaded. I read here about how this formatting can be implemented via css. Is there a really straight forward way to apply a css to an IPython Notebook and then have tables rendered using the style sheet?

Answer 1

You can run arbitrary javascript (with jQuery) either in markdown cells inside <script> tags, or via IPython’s IPython.core.display.Javascript class. With these, you can manipulate (or ruin) the document to your heart’s content, including adding stylesheets.

For instance, the following will stripe appropriately classed tables:

<script type="text/javascript">
    $('head').append(
        "<style type='text/css'>tr.odd{background-color: #def}</style>"
    );
</script>

If you just stick that in one of your markdown cells, then it will apply to everything on the page.

Or, you might run the same code (minus <script> tags) from Python in a code cell:

from IPython.core.display import Javascript, display
display(Javascript("""
    $('head').append(
        "<style type='text/css'>tr.odd{background-color: #def}</style>"
    );
"""))

But doing this will only affect your tables that are appropriately classed, which is up to the code that is writing the HTML (e.g. in Pandas).