Bootstrap: text-center Does Not Affect Table Header
In the following example, text-center does not affect the table header. The text in table body is displayed normally (center aligned) but not the header
<table class="table table-condensed table-hover text-center">
<thead>
<tr>
<th class="text-center">Room Id</th>
</tr>
</thead>
zengshengliu
All 2 comments
We set th { text-center: left; }, which is more specific than the class on the parent <table> and thus prevents the header cell from inheriting the centering styles. Putting the .text-center class directly on the <th> should work though (confirmed in the docs).
As our documentation for the text alignment classes shows them being used on paragraphs and doesn't claim compatibility with tables, I'd recommend using custom CSS to override Bootstrap's table header styles instead of using alignment classes in this situation.
/cc @mdo to confirm or deny
juthilo
on 24 Mar 2015
Ok thanks
zengshengliu
on 24 Mar 2015
Related issues
knownasilya
路
3Comments
iklementiev
路
3Comments
athimannil
路
3Comments
ghost
路
3Comments
tiendq
路
3Comments
Most helpful comment
We set
th { text-center: left; }, which is more specific than the class on the parent<table>and thus prevents the header cell from inheriting the centering styles. Putting the.text-centerclass directly on the<th>should work though (confirmed in the docs).As our documentation for the text alignment classes shows them being used on paragraphs and doesn't claim compatibility with tables, I'd recommend using custom CSS to override Bootstrap's table header styles instead of using alignment classes in this situation.
/cc @mdo to confirm or deny