Wrong table colors

[Re-Fish]

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.

[coliff]

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?

[coliff]

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.

[Re-Fish]

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.

[coliff]

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;
}

[Re-Fish]

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

[coliff]

Cool. You could test with this in the meantime: https://coliff.github.io/bootstrap-ie11/css/bootstrap-ie11.min.css