Элементы таблицы плохо совмещаются в Internet Explorer

Question

Элемент списка не выравнивает центр в Internet Explorer .Но в Chrome элемент центрирован.Прикрепленный образец кода.Я использую Bootstrap CSS Framework для всех классов.

Вот 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;
}

Answer 1

Попробуйте эту скрипку

Скрипка

.status-circle {
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
background: #737373;
display: block;
margin: auto;
}

вместо того, чтобы использовать элемент списка для одного элемента, вы можете достичь этого, используя div или span

Answer 2

Я изменил элемент внутри на div и перенес все стили из элемента li, также добавив содержимое.

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">
                    <div class="div-status-circle"></div>
                </td>
                <td class="text-center"></td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

.div-status-circle {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #000;
    width: 15px;
    height: 15px;
    content: "";
    background: #737373;
}