from IPython import display
In the previous NB we used !important
to make our output HTML CSS properties take priority over the NB pre-defined ones. This worked well except that we did not know in advance what would and wouldn't be overridden by the NB pre-defined output HTML CSS. It would mean some properties we would be artificially just setting to !important
which seems a little clunky.
Looking at the page structure (hit F12 in Chrome for example) shows that the output HTML generated by a cell is placed into an element which has the class .output_html
. Thus, a better way, perhaps to structure our CSS modifications is to add this as a prefix to all elements we format....
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>""")
styles = display.HTML("""<style>
.output_html th {
background: black;
color: white;
font-weight: bold;
}
.output_html td {
vertical-align: top;
}
</style>""")
display.display(styles)
display.display(tbl)
Title1 | Title 2 |
---|---|
Value 1 | Value 2 Something else |
Job done :) Although, even this method seems slightly artifical in the sense that we had to prefix all out CSS selectors with .output_html
rather than just having a "clean" style sheet...