The alignment of the list element is off-center in Internet Explorer, whereas in Chrome it is perfectly centered. Below is a snippet of the code being used with the Bootstrap CSS Framework.
Here is the JSfiddle
https://jsfiddle.net/8cunpsvy/
HTML:
<div class="card-body">
<table class="table-sm table-hover">
<thead>
<tr class="text-center">
<th class="w-25" scope="col"></th>
<th style="width: 54%" scope="col"></th>
<th style="width: 10%" scope="col">Actual</th>
<th style="width: 1%;" scope="col">Status</th>
<th style="width: 10%" scope="col">Expected</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td class="text-center">2/13/2019</td>
<td class="text-center">
<ul class="status-circle"><li></li></ul>
</td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.status-circle {
list-style: none;
margin: 0;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
border-spacing: 0px;
line-height: 0;
}
.status-circle li {
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
background: #737373;
}