bootstrap-4.0 таблица tr Класс d-flex не работает должным образом в браузере Firefox, но работает в Chrome.Я прикрепил свой код, хром работает нормально, но браузер Firefox не работает должным образом, я использую - bootstrap 4.0 - HTML-5 - CSS3
таблица bootstrap-4.0 tr класс d-flex не работает должным образом в браузере Firefoxно работает в хроме.Я прикрепил свой код, хром работает нормально, но браузер Firefox не работает должным образом, я использую - загрузчик 4,0 - HTML-5 - CSS3
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12 table-responsive">
<table class="table total_records table-bordered">
<thead class="thead-light">
<tr class="d-flex">
<th class="text-center col-2">Start Date</th>
<th class="text-center col-2">End Date</th>
<th class="text-center col-2">Absence Type</th>
<th class="text-center col-1">Days</th>
<th class="text-center col-2">Status</th>
<th class="text-center col-3">Action</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Regularization</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Permission</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Rejected</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Sick</td>
<td class="col-1">5</td>
<td class="col-2">Pending</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
</tbody>
</table>
</div>
</div></div>
<div class="col-12 table-responsive">
<table class="table total_records table-bordered">
<thead class="thead-light">
<tr class="d-flex">
<th class="text-center col-2">Start Date</th>
<th class="text-center col-2">End Date</th>
<th class="text-center col-2">Absence Type</th>
<th class="text-center col-1">Days</th>
<th class="text-center col-2">Status</th>
<th class="text-center col-3">Action</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Regularization</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Permission</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Rejected</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Sick</td>
<td class="col-1">5</td>
<td class="col-2">Pending</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
<tr class="d-flex">
<td class="col-2">08/20/2018</td>
<td class="col-2">08/24/2018</td>
<td class="col-2">Casual</td>
<td class="col-1">5</td>
<td class="col-2">Approved</td>
<td class="col-3 text-center">
<span class="calendar-table-icon" onclick="openNav('3')"><i class="fa fa-eye" aria-hidden="true"></i></span>
<span class="calendar-table-icon" onclick="openNav('2')"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="calendar-table-icon"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>
</td>
</tr>
</tbody>
</table>
</div>