表格調整th和td的行寬

我被困在這張表格中，我的表格中的數據與表格中的數據不一致，有人可以幫助我解決這個問題嗎？只有一件事我不能刪除它是高度：calc（100vh - 346px）;.我正在使用它來使滾動響應向上。表格調整th和td的行寬

你們能幫我嗎？謝謝。

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>

來源

2017-05-05 Raduken

你必須確保頭<thead>具有相同的寬度爲內容<tbody>！

解決方案＃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/

來源

2017-05-05 09:52:43

表格調整th和td的行寬

回答

相關問題