IE8 don't show all table borders

Question

EDIT: I ended up switching to an ul/li list. But I am still wondering, there should be a solution possible with tables as well.

I've got a html table set up with borders on it's TD elements. Displays perfect in modern browsers. But, although it can be debated, I wan't to support IE8 as much as possible.

Frankly, IE8 is doing weird stuff with the borders of the table. I've looked at a lot of questions asked down here but none of which i've found yield the answer to my situation.

The table should have borders on all sides of it's TD elements. IE8 only renders the left and buttom border. As you can see on the screenshot below. The code is found under the image. I can't find the solution, hope some of you got any idea.

Thanks so much for any thoughts! Link: Working example

The CSS Code:

.pricing-table{
border-collapse:collapse;
margin:20px;
padding:20px;
}

.pricing-table td {
width: 210px;
padding: 10px 0px;

border-top:1px solid #FFFFFF;
border-bottom:1px solid #e9e9e9;
border-left:1px solid #cdcdcd;
border-right:1px solid #cdcdcd;

font-size: 14px;
font-weight:bold;
line-height: 35px;
color: #555;
text-shadow: 0 1px 0 #fff;

background: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(237, 237, 237)));
background: -webkit-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: -moz-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: -o-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: -ms-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fafafa', EndColorStr='#ededed'); /*IE6 & IE7 gradient*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fafafa', endColorstr='#ededed')"; /*IE8 gradient*/
}
.pricing-table td span.icon-accept-16x16{
display:inline-block;
width:16px;
height:16px;
margin:0 10px;
background: url(img/icon-accept-16x16.png);
}
.pricing-table td.orange{
background:#ee5420;
filter:none;/*Fallback: IE 8 and below*/

font: 'Open Sans', sans-serif;
font-weight:600;

border-bottom:1px solid #b73f16;
border-top:1px solid #cdcdcd;
border-left:1px solid #ee5420;
border-right:1px solid #ee5420;

}
.pricing-table td.orange h2{
margin:0;
padding:0 0 0 36px;
font-size: 20px;
font-weight:600;
color:#FFF;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
line-height:40px;
}
/* Table Head  */
.pricing-table thead td.orange {
border:none;/*Not ideal, try ti find a fix*/
-webkit-top-left-border-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-top-right-border-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
}



/* Footer */
.pricing-table tfoot td {
width: 190px;
padding: 20px 10px;
text-align: center;
line-height: 18px;
background: #ffffff;
filter:none;

font-size: 11px;
font-weight:normal;
color: #828282;

-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;

-webkit-box-shadow: 0px 2px 0px #e4e4e4;
-moz-box-shadow: 0px 2px 0px #e4e4e4;
box-shadow: 0px 2px 0px #e4e4e4;
}

And here's the HTML:

<table class="pricing-table" >
<thead>
<tr>
<td class="orange">
<h2>Voor leerlingen</h2>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Online topotrainer</td>
</tr>
<tr>
<td>Topografieboekje</td>
</tr>
<tr>
<td>Jouw resultaten</td>
</tr>
<tr>
<td class="orange">
<h2>Voor docenten</h2>
</td>
</tr>
<tr>
<td>Toetsen genereren</td>
</tr>
<tr>
<td>Leerlingen volgen</td>
</tr>
<tr>
<td>Boekjes bestellen</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Topografie in de Klas is een 100% gratis lesmethode voor Topografie in het onderwijs.    </td>
</tr>
</tfoot>
</table>