JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 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">×</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>Time</th>
<th>Event</th>
<th>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>
...
CSS
.table-scroll thead {
display: block;
width: calc(100% - 90px);
}
.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;
}