Bootstrap - Aligning content in table header - css

Question

I have a web page that is using Bootstrap 3. In this web page, I am using a table with column headers. The column headers need to be centered. However, I also need to have a drop down menu in the upper-right corner of each column header. This last part is what's throwing everything off.
As you can see in this Bootply, my column headers aren't centered properly because of the drop down menu. That drop down menu isn't even positioned properly. I've tried using relative positioning, but apparently that doesn't work in a column header. My code looks like this:
<table class="table">
<thead>
<tr><th>Name</th>
<th class="text-center">
<div>Chicago</div>
<small class="text-muted">Illinois</small>
<div class="pull-right">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="chicagoDropDownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i>:</i>
</button>
<ul class="dropdown-menu dropdown-menu-right pull-right" aria-labelledby="chicagoDropDownMenu">
<li>Weather</li>
<li>Visitors Guide</li>
<li>Directions</li>
</ul>
</div>
</div>
</th>
<th class="text-center">
<div>New York</div>
<small class="text-muted">New York</small>
<div class="pull-right">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="nyDropDownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i>:</i>
</button>
<ul class="dropdown-menu dropdown-menu-right pull-right" aria-labelledby="nyDropDownMenu">
<li>Weather</li>
<li>Visitors Guide</li>
<li>Directions</li>
</ul>
</div>
</div>
</th>
<th class="text-center">
<div>San Francisco</div>
<small class="text-muted">California</small>
<div class="pull-right">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="sfDropDownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i>:</i>
</button>
<ul class="dropdown-menu dropdown-menu-right pull-right" aria-labelledby="sfDropDownMenu">
<li>Weather</li>
<li>Visitors Guide</li>
<li>Directions</li>
</ul>
</div>
</div>
</th>
</tr></thead>
</table>
My question is, how do I position a drop down menu in the upper-right corner of a column header, and still center the rest of the content?

Answer 1

Just use absolute positioning to make the text ignore the dropdown buttons. You can then move them around relative to their parent (the th tag). Note that you do need to give the th tag a position of relative for this to work:
CSS
.dropdown {
position: absolute;
top: 0;
right: 0;
}
th {
position: relative;
border: 1px solid red;
}
Note: The red border is just there to help clarify what's going on.
Hope this helps!