In [1]:
from IPython import display

Adding CSS to the output HTML (i.e. CSS that effects output generated by the NB but not how the NB itself displays) is fairly straight forward... just create an HTML style element and display it like so...

In [3]:
styles = display.HTML("""<style>
th {
    background: black;
    color: white;
    font-weight: bold;
}
td { 
    vertical-align: top;
}
</style>""")
display.display(styles)
In [4]:
tbl = display.HTML("""<table>
<tr>
    <th>Title1</th>
    <th>Title 2</th>
</tr><tr>
    <td>Value 1</td>
    <td>Value 2<br/>Something else</td>
</tr>
</table>""")
display.display(tbl)
Title1 Title 2
Value 1 Value 2
Something else

That's annoying, most of the CSS is looking okay, but the vertical align property has not been used!

So what happened? The display module generated a DIV in which to display the output of the cell. The elements output have a style named .output_html which is overriding the stylesheet we displayed above.

This leaves us with two options. We could use the !important CSS modifier to achieve the result we want. The drawback here is that to know which items to make !important we need to try it out and fix errors.

Also note that the style we just set applies to every output cell in this notebook.