IE在時間顯示錶格行邊框

Question

在IE 11中，表格行顯示白色邊框，即使它有border: none;在Firefox和Chrome上不會發生此問題。

JSFiddle link

圖片在IE：

圖片在Chrome

與玩弄後代碼，我看到圓角導致這個問題。當您使用 「border_radius」

table.striped > tbody > tr > td:first-child { 
    border-radius: 10px 0 0 10px; 
} 
table.striped > tbody > tr > td:last-child { 
    border-radius: 0 10px 10px 0; 
} 

Answer 1

的IE不能採取 「邊境」。有了這個「CSS」，這個問題在「IE」解決

table.striped>tbody>tr:nth-child(odd) > td 
{ 
    border-left: solid 1em #F2F2F2!important; 
} 

table.striped > tbody > tr > td.failed 
{ 
    border-left: solid 1em #FF4359!important; 
} 

table.striped>tbody>tr:nth-child(even) > td, 
table.striped > tbody > tr > td:first-child 
{ 
    border-left: none!important; 
} 

@import 'https://fonts.googleapis.com/icon?family=Material+Icons'; 
 
.searchbox { 
 
    width: 0% !important; 
 
} 
 
.searchbox.open { 
 
    width:45% !important; 
 
    padding-left: 10px !important; 
 
} 
 
.searchicon { 
 
    cursor: pointer; 
 
} 
 
.failed { 
 
    background-color: #ff4359; 
 
    color: white; 
 
} 
 
.pad-l-15 { 
 
    padding-left: 15px; 
 
} 
 

 
body { 
 
    background-color: #F3F3F2; 
 
} 
 

 
table.striped > tbody > tr > td:first-child { 
 
    border-radius: 10px 0 0 10px; 
 
} 
 

 
table.striped > tbody > tr > td:last-child { 
 
    border-radius: 0 10px 10px 0; 
 
} 
 

 
#listcount { 
 
    font-size: 18px; 
 
    color: #727d93; 
 
} 
 

 
.icons { 
 
    margin-left: auto; 
 
    padding: 5px; 
 
} 
 

 
.card .card-content .card-title { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
    table.striped>tbody>tr:nth-child(odd) > td 
 
    { 
 
     border-left: solid 1em #F2F2F2!important; 
 
    } 
 
    table.striped > tbody > tr > td.failed 
 
    { 
 
     border-left: solid 1em #FF4359!important; 
 
    } 
 
     table.striped>tbody>tr:nth-child(even) > td, 
 
     table.striped > tbody > tr > td:first-child 
 
    { 
 
     border-left: none!important; 
 
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col s12 m6"> 
 
     <div class="card"> 
 
     <div class="card-content"> 
 
      <span class="card-title"> 
 
       <i class="material-icons">business_center</i> 
 
       My List 
 
       <span id="listcount"> 
 
       (12) 
 
       </span> 
 
       <div class="icons"> 
 
        
 
       <span class="new badge yellow" data-badge-caption=""> 
 
        1 
 
       </span> 
 
       
 
       </div> 
 
       <input id="fund-search" type="search" class="searchbox" placeholder="Search"> 
 
       \t \t \t \t \t <i class="material-icons right searchicon" ng-click="toggleSearch()">search</i> 
 
\t \t \t \t    
 
      </span> 
 
      
 
      <div class=""> 
 
       <table class="table striped table-hover table-curved" ng-controller="Hello"> 
 
        <tbody> 
 
        <tr> 
 
         <td class="pad-l-15"><b>12345</b></td> 
 
         <td>Random Text @</td> 
 
         <td><b>300121</b></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="failed pad-l-15"><b>12345678</b></td> 
 
         <td class="failed">Random Text @</td> 
 
         <td class="failed"><b>300121</b></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="pad-l-15"><b>123</b></td> 
 
         <td>Random Text @</td> 
 
         <td><b>300121</b></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="pad-l-15"><b>123</b></td> 
 
         <td>Random Text @</td> 
 
         <td><b>300121</b></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="pad-l-15"><b>123</b></td> 
 
         <td>Random Text @</td> 
 
         <td><b>300121</b></td> 
 
        </tr> 
 
        <tr> 
 
         <td class="pad-l-15"><b>123</b></td> 
 
         <td>Random Text @</td> 
 
         <td><b>300121</b></td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col s12 m6"> 
 
     <div class="card"> 
 
     <div class="card-content"> 
 
      <span class="card-title">My Right List 
 
      <span class="new badge red" data-badge-caption="">4</span> 
 
      </span> 
 
      <div class="table-responsive"> 
 
       <table class="table striped table-hover table-curved" ng-controller="Hello"> 
 
        <tbody> 
 
        <tr> 
 
         <td><b>12345</b></td> 
 
         <td>Random Text @</td> 
 
         <td><b>300121</b></td> 
 
        </tr> 
 
        <tr> 
 
         <td><b>12345678</b></td> 
 
         <td>Random Text @</td> 
 
         <td><b>300121</b></td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col s12 m6"> 
 
      <div class="card"> 
 
       <div class="card-content"> 
 
        <span class="card-title">Nested left</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col s12 m6"> 
 
      <div class="card"> 
 
       <div class="card-content"> 
 
        <span class="card-title">Nested right</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>