表格邊界不工作在IE中

我有datagrid表中應用了一些樣式。一切工作正常Chrome和Firefox，但邊界不適用於IE中的表格。當我將相同的樣式應用於table tbody td時，會看到邊框。在以下樣式中，邊界左側在IE中不起作用。表格邊界不工作在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>

來源

2014-02-23 dvln

你可以分享你的HTML，所以我們知道你的表是如何構建的？ –

哪個版本的IE？首先想到的是它可能對'.datagrid table thead th'與'.datagrid table thead tr th'挑剔[ – JackArbiter

]使用[this JSFiddle]（http://jsfiddle.net/zLn4J/），在IE11中，「border-left」規則適用於我。請注意，我刪除了CSS選擇器的'.datagrid'部分，因爲您的標記不包含任何與之匹配的內容。 – ajp15243

嘗試應用

border-collapse: separate;

到相關表

來源

2014-03-24 11:35:47 kashesandr

@dvln你能否接受答案作爲解決方案，如果你覺得這有幫助，它解決了你的問題？謝謝！ – kashesandr

這可能會產生額外的造型效果，導致細胞之間可能出現額外的不希望的分離。 – stealthwang

@ stealthwang是的，同意，它可以 – kashesandr

我已經看到了這個問題的最佳解決方案是應用

background-clip: padding-box;

到th元素。

IE在某些情況下似乎在沒有這種情況下渲染背景。

來源

2017-02-02 19:52:36 stealthwang

表格邊界不工作在IE中

回答

相關問題