title: How to adjust height and formatting of rows in Bokeh DataTable
body: <p>I'm trying to adjust the font-size of the title and cells and pop-up message of a bokeh DataTable.
  When doing so using the HTMLTamplateFormatter I can get the font-size to increase, however, I do not know how to increase the height of a row.</p>
  
  <p>Also I have no clue how to adjust the formatting/height of the top/title cell of the column.</p>
  
  <p>I was able to make the title bold using the information provided at <a href="https://stackoverflow.com/questions/43954997/python-bokeh-datatable-cells-styling">this</a> issue. Is there a similar piece of code I could use to increase the font-size.</p>
  
  <p>When hovering a cell I want to show some information, I would also like to format this, is that possible? And if so how?</p>
  
  <p>This is a minimal example of what I currently have:</p>
  
  <pre><code>import pandas
  
  from bokeh.models import (ColumnDataSource, TableColumn, DataTable)
  from bokeh.models.widgets import HTMLTemplateFormatter
  from bokeh.io import show
  
  
  data = pandas.DataFrame({"x": [1, 2, 3, 4],
                       "y": [200, 3, 4, 5]})
  source = ColumnDataSource(data=data)
  
  columns = []
  
  # column 1 with bold title: x and 200% font-size
  template200 = """
  &lt;div title="&lt;%= x %&gt;" style="font-size: 200%"&gt;
  &lt;%= value %&gt;
  &lt;/div&gt;
  """
  htmltemplateformatter200 = HTMLTemplateFormatter(template=template200)
  col = "x"
  title = "&lt;b&gt;%s&lt;/b&gt;" % col
  columns.append(TableColumn(field=col, title=title,
                             width=50, editor=None,
                             formatter=htmltemplateformatter200))
  
  # column 2 with normal title: y and 400% font-size
  
  template400 = """
  &lt;div title="&lt;%= x %&gt;" style="font-size: 400%"&gt;
  &lt;%= value %&gt;
  &lt;/div&gt;
  """
  htmltemplateformatter400 = HTMLTemplateFormatter(template=template400)
  col = "y"
  columns.append(TableColumn(field=col, title=col,
                             width=50, editor=None,
                             formatter=htmltemplateformatter400))
  
  data_table = DataTable(source=source, columns=columns, row_headers=False,
                         sortable=False)
  
  show(data_table)
  </code></pre>
  
  <p>This code will make the text in the table cell bigger. However, when I change the size to 400% the text is larger than the height of the row can visualize. </p>
  
  <p>Could anyone help me with this?</p>
  
  <p>Cheers,
  Dave</p>
  
  <p><strong>First edit:</strong></p>
  
  <p>To show what I want to be able to do:</p>
  
  <p><a href="https://i.stack.imgur.com/BwwEA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BwwEA.png" alt="Table where row heights are adapted to text size"></a></p>
  
  <p>In my case I think I would only need a single row height since I want all the font-sizes to be the same.</p>
  
  <p><strong>Second edit:</strong></p>
  
  <p>After the reply of Okonomiyaki I looked at my code again and came up with the following solution:</p>
  
  <p>main.py:</p>
  
  <pre><code>import pandas
  
  from bokeh.models import (ColumnDataSource, TableColumn, DataTable)
  from bokeh.models.widgets import HTMLTemplateFormatter
  from bokeh.io import curdoc
  
  
  data = pandas.DataFrame({"x": [1, 2, 3, 4],
                          "y": [200, 3, 4, 5]})
  source = ColumnDataSource(data=data)
  
  columns = []
  
  # column 1 with bold title: x and 20px font-size
  template200 = """
  &lt;div title="&lt;%= x %&gt;" style="font-size: 20px;"&gt;
  &lt;%= value %&gt;
  &lt;/div&gt;
  """
  htmltemplateformatter200 = HTMLTemplateFormatter(template=template200)
  col = "x"
  title = "&lt;b&gt;%s&lt;/b&gt;" % col
  columns.append(TableColumn(field=col, title=title,
                             width=50, editor=None,
                             formatter=htmltemplateformatter200))
  
  
  # column 2 with bold title: y and 20px font-size
  template400 = """
  &lt;div title="&lt;%= y %&gt;" style="font-size: 20px;"&gt;
  &lt;%= value %&gt;
  &lt;/div&gt;
  """
  htmltemplateformatter400 = HTMLTemplateFormatter(template=template400)
  col = "y"
  columns.append(TableColumn(field=col, title=col,
                             width=50, editor=None,
                             formatter=htmltemplateformatter400))
  
  data_table = DataTable(source=source, columns=columns, row_headers=False,
                         sortable=False, height=1000, fit_columns=True)
  
  curdoc().add_root(data_table)
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $(function() {
      $( document ).tooltip();
    });
    &lt;/script&gt;
      &lt;meta charset="utf-8"&gt;
      {{ bokeh_css }}
      {{ bokeh_js }}
      &lt;style&gt;
        {% include 'jquery-ui.css' %}
        {% include 'styles.css' %}
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="content"&gt;
        {{ plot_div|indent(8) }}
      &lt;/div&gt;
      {{ plot_script|indent(8) }}
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>styles.css:</p>
  
  <pre><code>.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 500px;
  -webkit-box-shadow: 0 0 5px #aaa;
  box-shadow: 0 0 5px #aaa;
  opacity: 1;
  font-size: 20px;
  }
  </code></pre>