Tabulator vertical align headers when no headerfilter is set

user_9088940 0
Viewed 203

I have a table where I want some columns with a headerFilter and some without. The header of those columns without a filter are vertically aligned at the bottom.

headers not aligned properly

I only found a headerHozAlign in the documentation, but none for vertical alignment. Is there an easy way to do this or do I have to manipulate the css?

Edit 1:

I figured this has something to do with my stylesheets interacting. I use the bootstrap 4.5 css and the tabulator_bootstrap4 css.

<!-- Bootstrap 4.5.0 -->
<link rel="stylesheet" href="/bootstrap.min.css">

<!-- Tabulator 4.9.3 -->
<link rel="stylesheet" href="/tabulator_bootstrap4.min.css">

When i remove the bootstrap 4.5 css, the headings look the way they should (the rest of the website looks strange, obviously).

Correct display of column headers and filters

The Tabulator documentation just says

A Bootstrap 4 compatible theme[...] The stylesheet maps the standard bootstrap table styling onto Tabulator. Source

Could this be the problem, that the tabulator stylesheet is just ment for bootstrap version 4?

tabulator css
2 Answers

Do you have some code that shows it failing ? Coz this jsfiddle shows it shouldnt act like that at all

<leavemealone/>
user_105096160

The vertical alignment of column headers is set for the table as a whole using the columnHeaderVertAlign option in the table constructor:

var table = new Tabulator("#example-table", {
   columnHeaderVertAlign:"bottom",
});

It accepts a value of either top, middle, or bottom

user_35889930
Related