ブートストラップ - テーブルヘッダーのコンテンツの整列

Question

私はブートストラップ3を使用しているWebページを持っています。このWebページでは、カラムヘッダーを持つテーブルを使用しています。列ヘッダーは中央に配置する必要があります。ただし、各列ヘッダーの右上隅にドロップダウンメニューが必要です。この最後の部分はすべてを投げ捨てるものです。

このBootplyに示されているように、ドロップダウンメニューのため、私の列見出しが正しく中央揃えされていません。そのドロップダウンメニューは正しく配置されていません。私は、相対的な位置を使用してみましたが、明らかにそれは列のヘッダーで動作しません。私のコードは次のようになります。

<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><a href="#">Weather</a></li> 
      <li><a href="#">Visitors Guide</a></li> 
      <li><a href="#">Directions</a></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><a href="#">Weather</a></li> 
      <li><a href="#">Visitors Guide</a></li> 
      <li><a href="#">Directions</a></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><a href="#">Weather</a></li> 
      <li><a href="#">Visitors Guide</a></li> 
      <li><a href="#">Directions</a></li> 
      </ul> 
     </div> 
     </div>  
    </th> 
    </tr></thead> 
</table> 

私の質問は、どのように私は、列ヘッダーの右上隅にあるドロップダウンメニューを配置し、まだ残りのコンテンツを中央んですか？

Answer 1

テキストをドロップダウンボタンを無視するように絶対位置を使用するだけです。親との相対的な移動が可能です（thタグ）。あなたが仕事にthタグにこのためrelativeの位置を与える必要がないことに注意してください：

CSS

.dropdown { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

th { 
    position: relative; 
    border: 1px solid red;  
} 

注：赤い枠は何が起こっているのか明確に支援することだけがあります。

希望すると便利です。