T车身轮廓闪烁然后关闭答案

【问题标题】：TBody outline flashes on then offT车身轮廓闪烁然后关闭
【发布时间】：2018-08-22 14:47:27
【问题描述】：

我在我的 asp.net 页面中有一个 html 表格，并且我在两行周围应用了 <tbody> 标记，以便我可以勾勒出这些行。

我的 HTML 如下。

 <table>
                <tbody class="tableBody">
                <tr>

                    <td colspan="4" style="text-align: center;">A Title</td>
                </tr>
                <tr>
                    <td>
                        <div id="abc" class="card"></div>
                    </td>
                    <td>
                        <div id="def" class="card"></div>
                    </td>
                    <td>
                        <div id="ghi" class="card"></div>
                    </td>
                    <td></td>
                </tr>
                    </tbody>
                <tbody class="tableBody">
                <tr>
                    <td colspan="4" style="text-align: center;">Another Title</td>
                </tr>
                <tr>
                    <td>
                        <div id="jkl" class="card"></div>
                    </td>
                    <td>
                        <div id="mno" class="card"></div>
                    </td>
                    <td>
                        <div id="pqr" class="card"></div>
                    </td>
                    <td>
                        <div id="stu" class="card"></div>
                    </td>
                </tr>
                    </tbody>
            </table>

我的 CSS 如下：

.AssetTableFormat {
    /*border-style: solid;*/
    margin: 0 auto;
    font-family: 'Century Gothic';
    font-size: 10pt;

}

    .AssetTableFormat td {
        /*border:1px solid;*/
        padding:5px 5px 5px 5px;
    }

.card {
    height: 60px;
    width: 100px;
}

.tableBody {
    outline: 1px solid black;
    display: table-row-group;
}

当页面在 IE 11 中加载时，大纲会在内容显示后出现，但随后会消失。如果我在 Chrome 中尝试它，那么大纲就会保留，这就是我想要的。

编辑：我要补充一点，表格单元格中的 DIV 显示来自 justGage 的 JavaScript 仪表

【问题讨论】：

标签： html html-table outline

【解决方案1】：

IE11 在所有情况下都没有完全（或至少不正确）支持单个表中的多个 <tbody>

较新的浏览器应该可以很好地处理它，这就是 Chrome 按预期工作的原因，它通常也可以在 IE11 中运行 - 但有时您会在 IE11 中发现一些奇怪的行为。

您也许可以使用 tfoot（或 thead，但 tfoot 在这里似乎是更好的选择）来伪造某些内容，但要注意屏幕阅读器等方面的可访问性问题。

【讨论】：