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...
styles = display.HTML("""<style>
th {
background: black;
color: white;
font-weight: bold;
}
td {
vertical-align: top;
}
</style>""")
display.display(styles)
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.