表格的边框在 IE 中不起作用

Posted 2023-03-06

【中文标题】表格的边框在 IE 中不起作用

【英文标题】：Border for table th not working in IE

【发布时间】：2014-03-24 18:26:52

【问题描述】：

我有应用了一些样式的数据网格表。一切正常 Chrome 和 Firefox 但边框不适用于 IE 中的 table thead th。当我将相同的样式应用于表 tbody td 时，可以看到边框。在以下样式中，左边框在 IE 中不起作用。

.datagrid table thead th 
color: #4180ab;
font-size: 12px;
font-weight: bold;
line-height: 30px;
text-align: center;
border-left: 1px solid #a8cbd1;
background: #f1f6fa;

//html 标记

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead class="thead">
    <tr>
        <th>No</th>
        <th>Application Number</th>
        <th>Given Name</th>
        <th>Family Name</th>
        <th>Nationality</th>
        <th>Passport Number</th>
        <th>Visa Type</th>
        <th>Transaction Type</th>
        <th>Submission Date</th>
    </tr>
</thead>
<tbody>
    <tr class="gradeX">
        <td>1</td>
        <td>APP1212</td>
        <td>Steven</td>
        <td class="center">Gerrard</td>
        <td class="center">British</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png"  class="lock"></td>
    </tr>
    <tr class="gradeC">
        <td>2</td>
        <td>APP1012</td>
        <td>Fernando</td>
        <td class="center">Torres</td>
        <td class="center">Spanish</td>
        <td>12121212</td>
        <td>Short Work Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png"  class="lock"></td>
    </tr>
    <tr class="gradeA">
        <td>3</td>
        <td>APP1512</td>
        <td>Xabi</td>
        <td class="center">Alonso</td>
        <td class="center">Spanish</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png"  class="lock"></td>
    </tr>
    <tr class="gradeA">
        <td>4</td>
        <td>APP1282</td>
        <td>Zlatan</td>
        <td class="center">Ibrahimovic</td>
        <td class="center">Swedish</td>
        <td>12121212</td>
        <td>Short Work Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png"  class="lock"></td>
    </tr>
    <tr class="gradeA">
        <td>5</td>
        <td>APP1612</td>
        <td>Robin</td>
        <td class="center">Van Persie</td>
        <td class="center">Dutch</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png"  class="lock"></td>
    </tr>

            <tr class="gradeX">
        <td>6</td>
        <td>APP1212</td>
        <td>Steven</td>
        <td class="center">Gerrard</td>
        <td class="center">British</td>
        <td>12121212</td>
        <td>Tourist Visa</td>
        <td>454584545</td>
        <td>20-01-2014<img src="images/lock.png"  class="lock"></td>
    </tr>

</tbody>

</table>

【问题讨论】：

您能否分享一下 HTML，以便我们了解您的表格的结构？

哪个版本的IE？首先想到的可能是.datagrid table thead th 与.datagrid table thead tr th 之间的挑剔

使用this JSFiddle，border-left 规则在 IE11 中对我来说效果很好。请注意，我删除了 CSS 选择器的 .datagrid 部分，因为您的标记不包含任何匹配的内容。

刚刚发现边框出现在 IE 中，直到我打开页面时单击“允许阻止的内容”提示。但是一旦我点击它，它就会消失。

【参考方案1】：

尝试申请

border-collapse: separate;

到相关表

【讨论】：

@dvln 如果您觉得这有帮助并且解决了您的问题，您能否接受这个答案作为解决方案？谢谢！

这可能会产生额外的样式后果，从而导致单元格之间出现额外的可能不希望的分离。

@stealthwang 是的，同意，可以

【参考方案2】：

我见过的这个问题的最佳解决方案是应用

background-clip: padding-box;

到第 th 个元素。

如果没有这个，IE 似乎在某些情况下会在边框上渲染背景。