Question

我有datagrid表，其中应用了一些样式。一切都工作正常Chrome和Firefox但边框不适用于IE中的表格。当我将相同的样式应用于table tbody td时会看到边框。在以下样式中，border-left在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" alt="" 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" alt="" 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" alt="" 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" alt="" 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" alt="" 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" alt="" class="lock"></td>
    </tr>

</tbody>

</table>

Answer 1

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

background-clip: padding-box;

到第th个元素。

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

Answer 2

尝试申请

border-collapse: separate;

到相关表格

表的边界不在IE中工作

2 个答案: