Giters

coliff / bootstrap-ie11

Internet Explorer 11 compatibility solution for Bootstrap 5

Home Page:https://coliff.github.io/bootstrap-ie11/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Wrong table colors

Re-Fish opened this issue · comments

commented

When I link CSS bootstrap@5.0.0-beta2 I see black rows instead of white in a striped table (IE11), gray rows are still gray. In other browsers everything is alright. If I change it back to beta1 rows are white again as it should be.
black rows

commented

hey - thanks for reporting this issue. Could you please provide a code snippet of the table you're working on?

Are you using the .table-dark class? or .table-striped?

commented

Striped tables are fixed in IE11 now.

Preview at: https://coliff.github.io/bootstrap-ie11/tests/#tables

I'll look at improving the .table-hover tables next.

commented

I see that it's working in your tests. But tables are still black in my example, no matter striped or not. Hover is and was OK. Maybe something is wrong with files that I link. Here is a part of my code with linking:

...
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <!-- Bootstrap CSS for IE -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.0.0-beta2/css/bootstrap-ie11.min.css" rel="stylesheet"
        media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
    <!-- required JavaScript polyfills for IE11 -->
    <script nomodule crossorigin="anonymous"
        src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes">
        </script>
    <script
        nomodule>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>
    <!-- polyfill for tabs -->
    <!-- https://github.com/coliff/bootstrap-ie11/issues/39 -->
    <script nomodule src="https://cdn.jsdelivr.net/npm/element-qsa-scope@1.1.0/index.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/svey.min.css">
    <script defer src="js/svey.min.js"></script>
</head>

And here is a part of my code with tables:

<div class="table-responsive">
    <table class="table table-hover caption-top text-center">
        <caption class="fw-bold">По схеме включения и номинальным значениям входных параметров
        </caption>
        <thead>
            <tr>
                <th rowspan="2">Обозначение</th>
                <th colspan="2">Номинальные значения входных сигналов</th>
                <th rowspan="2">Схема подключения</th>
            </tr>
            <tr>
                <th>Ток, А</th>
                <th>Напряжение, В</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>СПЦ-100/1-4</td>
                <td>3х1</td>
                <td>3х57,7</td>
                <td>Четырёхпроводная</td>
            </tr>
            <tr>
                <td>СПЦ-100/1-3</td>
                <td>2х1</td>
                <td>3х100</td>
                <td>Трёхпроводная</td>
            </tr>
            <tr>
                <td>СПЦ-100/5-4</td>
                <td>3х5</td>
                <td>3х57,7</td>
                <td>Четырёхпроводная</td>
            </tr>
            <tr>
                <td>СПЦ-100/5-3</td>
                <td>2х5</td>
                <td>3х100</td>
                <td>Трёхпроводная</td>
            </tr>
            <tr>
                <td>СПЦ-380/5-4</td>
                <td>3х5</td>
                <td>3х220</td>
                <td>Четырёхпроводная</td>
            </tr>
        </tbody>
    </table>
</div>

I attached a screenshot of a table where all cells are selected and last row is hovered.
black table

commented

I haven't published a new version of this CSS to the CDN yet, for now you can manually add this CSS:

.table > :not(caption) > * > * {
  box-shadow: none !important;
}

.table.table-striped:not(.table-dark) > tbody > tr:nth-child(odd) > * {
  background-color: #f2f2f2 !important;
}

.table-dark.table-striped > :not(caption) > *:nth-child(odd) > * {
  opacity: 0.9;
}

.table-dark.table-striped > thead > tr > th {
  opacity: 1 !important;
}

.table.table-hover:not(.table-dark) > tbody > tr:hover > * {
  background-color: #f2f2f2 !important;
}

.table.table-hover.table-dark > tbody > tr:hover > * {
  opacity: 0.9;
}

.table.table-hover.table-striped > tbody > tr:hover > * {
  background-color: #e5e5e5 !important;
}
commented

Oh, thank you for that info. I'll wait )