テーブルthとtdの行の幅を調整

Question

私はこのテーブルaligmentにスタックしている私のデータ内のテーブル内の誰かがこれで私を助けることができないと合わせていない？私がこれから取り除くことのできない1つのことは高さです：calc（100vh - 346px）;.私はスクロールを上向きにするためにこれを使用しています。

あなたは私を助けることができますか？ありがとうございました。

コード（https://jsfiddle.net/wuuf5g87/）：あなたは、ヘッダー<thead>がコンテンツ<tbody>と同じ幅を有していることを確認する必要があり

table-scroll tbody { 
 
    overflow-y: scroll; 
 
    display: block; 
 
    height: calc(100vh - 346px); 
 
    width: calc(100% - 70px); 
 
} 
 
.table-scroll tr { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    display: inline-table; 
 
} 
 
.table-scroll thead > tr > th { 
 
    border: none; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <table class="table table-scroll table-striped" aurelia-table=""> 
 
      <thead> 
 
      <tr> 
 
       <th class="col-md-4">Time</th> 
 
       <th class="col-md-4">Event</th> 
 
       <th class="col-md-4">Description</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
       <td> 
 
       Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
       </td> 
 
       <td>Rwwwwwwwwww</td> 
 
      </tr> 
 
      <tr> 
 
       <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
       <td> 
 
       Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
       </td> 
 
       <td>wwwwwww</td> 
 
      </tr> 
 
        <tr> 
 
       <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
       <td> 
 
       Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
       </td> 
 
       <td> 
 
       wwwwwww 
 
       </td> 
 
      </tr> 
 
        <tr> 
 
       <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
       <td> 
 
       Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
       </td> 
 
       <td>wwwwwww</td> 
 
      </tr> 
 
        <tr> 
 
       <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
       <td> 
 
       Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
       </td> 
 
       <td> 
 
       wwwwwww 
 
       </td> 
 
      </tr> 
 
        <tr> 
 
       <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
       <td> 
 
       Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
       </td> 
 
       <td>wwwwwww</td> 
 
      </tr> 
 
        <tr> 
 
       <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
       <td> 
 
       Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
       </td> 
 
       <td>wwwwwww</td> 
 
      </tr> 
 
        <tr> 
 
       <td>00:00:00<i class="fa fa-clock-o pull-right" aria-hidden="true"></i></td> 
 
       <td> 
 
       Call 3:00pm<i class="fa fa-clock-o pull-right" aria-hidden="true"></i> 
 
       </td> 
 
       <td>wwwwwww</td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td> 
 
       </td> 
 
       <td> 
 
       <i class="fa fa-plus pull-right" aria-hidden="true"></i> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

！

溶液＃1：

あなたのCSSに以下を追加することができます。

.table-scroll thead { 
    display: block; 
    width: calc(100% - 90px); /** -70px like content and -20px for scrollbar */ 
} 

あなた<th>にcol-md-4を削除する必要があります。このソリューションのために。

デモ：https://jsfiddle.net/wuuf5g87/1/

溶液＃2：

あなたは、次のCSSルールを使用することができます。

.table-scroll tbody { 
    overflow-y: scroll; 
    display: block; 
    height: calc(100vh - 346px); 
    width: 100%; 
} 
.table-scroll thead { 
    display: block; 
    width: calc(100% - 20px); /** -20px for scrollbar */ 
} 

デモ：https://jsfiddle.net/wuuf5g87/2/