Hi there, I'm having trouble with aligning the data inside a table. The table alignment seems off, and I'm struggling to fix it. Can anyone lend a hand with this? The only thing I can't remove is the height: calc(100vh - 346px); as it's essential for making the scroll responsive upwards.
Any help from you guys would be greatly appreciated. Thank you.
Link to the code: https://jsfiddle.net/wuuf5g87/
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">×</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></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>