表格调整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的行宽

回答

相关问题