In [1]:
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....

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>""")

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...