IE displays table row border at times - html

Question

In in IE 11 the table row is displaying a white line border even though it has border: none; This problem doesn't occur on firefox and chrome.
JSFiddle link
Image in IE:
Image in Chrome
After playing around with the code, I saw that the rounded corners cause this issue.
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

The IE can not take "border" when you use a "border_radius". With this "CSS", this issue is solved in the "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">
<i class="material-icons right searchicon" ng-click="toggleSearch()">search</i>
</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>