Python Bokeh table columns and headers don't line up
<p>I am trying to display a table in a jupyter notebook using python and the visualization library <a href="http://bokeh.pydata.org/en/0.10.0/index.html">Bokeh</a>. I use the following code to display my table in an jupyter notebook where <strong>result</strong> is a dataframe:</p>

<pre><code>source = ColumnDataSource(result)

columns = [
        TableColumn(field="ts", title="Timestamp"),
        TableColumn(field="bid_qty", title="Bid Quantity"),
        TableColumn(field="bid_prc", title="Bid Price"),
        TableColumn(field="ask_prc", title="Ask Price"),
        TableColumn(field="ask_qty", title="Ask Quantity"),
    ]

data_table = DataTable(source=source, columns=columns, fit_columns=True, width=1300, height=800)
show(widgetbox([data_table], sizing_mode = 'scale_both'))
</code></pre>

<p>Previously I was using vform although this now seems to be depreciated and no longer works as expected either. This occurred after my jupyter notebook version was updated. Regardless of what I set the width my column headers don't line up and have a weird overlap with the table:</p>

<p><a href="http://i.stack.imgur.com/aHAL0.png"><img src="http://i.stack.imgur.com/aHAL0.png" alt="enter image description here"></a></p>

<p>This did not happen before, I was able to get a nice table where everything lined up. Even if I adjust the headers they still wont line up. This does not happen when I save the table as an html file instead of calling show() directly in the Jupyter notebook. What do I need to change? Is there a better way to do this?</p>

<p><strong>Full Example</strong></p>

<pre><code>from bokeh.io import show, output_notebook
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import TableColumn, DataTable
import pandas as pd

output_notebook()

d = {'one' : pd.Series([1., 2., 3.], index=['a', 'b', 'c']), 
 'two' : pd.Series([1., 2., 3., 4.], index=['a', 'b', 'c', 'd'])}
df = pd.DataFrame(d)

source = ColumnDataSource(df)

columns = [
    TableColumn(field="one", title="One"),
    TableColumn(field="two", title=" Two"),
]

data_table = DataTable(source=source, columns=columns, 
    fit_columns=True, width=800, height=800)
show(widgetbox([data_table], sizing_mode = 'scale_both'))
</code></pre>

<p>This is running on a system with the following versions:</p>

<ul>
<li>Jupyter 4.2.0 </li>
<li>Python 2.7.12 (Anaconda 2.3.0 64 bit)</li>
<li>Bokeh 0.12.2</li>
</ul>

<p>The css styling of Bokeh widgets for Jupyter notebooks is in <a href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.0.min.css" rel="nofollow">http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.0.min.css</a>, where <code>height:16px</code> for elements <code>.bk-root .bk-slick-header-column.bk-ui-state-default</code> is hardcoded. So it cannot be changed without changing the css. </p>

<p>It can be styled adhock by <code>HTML</code> function</p>

<pre><code>from IPython.core.display import HTML
HTML("""
&lt;style&gt;
.bk-root .bk-slick-header-column.bk-ui-state-default {
height: 25px!important;
}
&lt;/style&gt;
""")
</code></pre>

<p>For the persistent change css can be added to <code>custom</code> directory in Jupyter config. You can figure out where it is by calling </p>

<pre><code>jupyter --config-dir
</code></pre>

<p>By default it is <code>~/.jupyter</code>
The new css need to be in <code>~/.jupyter/custom/custom.css</code> then.</p>

<p>Before<a href="http://i.stack.imgur.com/2vyXx.png" rel="nofollow"><img src="http://i.stack.imgur.com/2vyXx.png" alt="enter image description here"></a></p>

<p>After<a href="http://i.stack.imgur.com/a7EAU.png" rel="nofollow"><img src="http://i.stack.imgur.com/a7EAU.png" alt="enter image description here"></a></p>

python ipython jupyter bokeh