cssテーブル行がテーブルの幅まで移動しない

Question

テーブルがoverflow-y: autoとdisplay:blockに設定されていますが、テーブルの全幅まで行がスペースを占めないという問題があります。以下 はスクリーンショットです：

ここではコードです：

<div class="row"> 
     <div class="col-md-6"> 
      <table class="table table-hover "> 
       <thead> 
        <tr><th style="text-align: center">Excel List</th></tr> 
        <tr> 
         <td> 
          <input type="text" class="form-control" placeholder="Search Excel" ng-keyup="searchExcel()" ng-model="excelSearchTerm"> 
         </td> 
        </tr> 
       </thead> 
       <tbody class="tbody-style excel-list-table"> 
        <tr ng-repeat="excel in excelList" ng-if="excelSearchTerm == ''"> 
         <td ng-click="ctrlClickExcel($event, excel)" ng-class="{'selected' : excel.selected}">{{excel.dir}}</td> 
        </tr> 

        <tr ng-repeat="excel in excelSearchResults" ng-if="excelSearchTerm != ''"> 
         <td ng-click="ctrlClickExcel($event, excel)" ng-class="{'selected' : excel.selected}">{{excel.dir}}</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
</div> 

私はdisplay: blockを削除すると、その行は全幅を取るが、それはないでしょう唯一の時間だが、オーバーフローが発生し、250ピクセルの高さではなくフルスクリーンが表示されます。

私はブートストラップを使用しています。

編集： 回避策がありました。私は見出しのための別のテーブルと、オーバーフロー-yと表示ブロックを持つdivに含まれる別のテーブルを追加しました。

Answer 1

表外のDIVを追加して、オーバーフロー入れ

<div style="overflow-y: auto;display:block;height:250px"> 
<table width="100%"> 
.. 

Answer 2

変更クラス= "COL-MD-6"クラス= "COL-MD-12"あなたのコードへ

Answer 3

あなたがfix the table headerすることができ、または単にあなた単に `表示を削除し、

Excel List<br> 
<input type="text" class="form-control" placeholder="Search Excel" ng-keyup="searchExcel()" ng-model="excelSearchTerm"> 
<div style="overflow-y: auto;display:block;height:250px"> 
<table width="100%">