Datatables "compact" class prevents centering of elements

tquill

I've got a datatable that I can't seem to get the text within <th> elements centered. If I remove the compact class from the table, the header <th> elements center just fine.

Is there a solution where I could have the <th> elements centered and keep using the "compact" class?

A few notes about my setup:
-bootstrap 4
-lots of options for datatables being used (fixed columns, server side processing, etc)

allan

Sounds like this might be more of a Bootstrap 4 question that DataTables specific, or do you not have this issue if you don't use DataTables? A link to a test case showing the issue would be useful.

My guess is that you'd need to use text-align: center on a suitable thead th selector, but without a test case I'm not certain.

Allan

tquill

Allan, thanks for responding.

The issue doesn't exist if I remove the "compact" class, or if I don't make the table a DataTable.

I'll try and get a link to a test case.

cygnus8929

I was able to reproduce this issue (the headers do not center align when using the compact class). Please see http://live.datatables.net/lohihojo for a simple example. If you remove the "compact" from the class list for the table, the header entries center align properly.

allan

Thank you!

table.dataTable.compact thead th,
table.dataTable.compact thead td {
  padding: 4px 17px;
}

I've committed that change here and it will be in the next release.

Allan

cygnus8929

My pleasure. Thanks for the quick response! Oh yea, and thanks for creating DataTables! :-)