Squeak.ru - шаблоны программирования

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

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

Вот JSfiddle https://jsfiddle.net/8cunpsvy/

результат в IE

результат в Chrome

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;
}
css bootstrap-4 internet-explorer
22.02.2019

  • Почему вы устанавливаете ширину в td? вы уже установили ширину в th, поэтому следующие td будут иметь ту же ширину, что и th 22.02.2019
  • Я буду удалять его. спасибо за голову. 22.02.2019

Ответы:


1

Я изменил элемент внутри на 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;
}
22.02.2019

2

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

Скрипка

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

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

22.02.2019
Новые материалы
Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...