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