编辑：我最终切换到 ul/li 列表。但我仍然想知道，表格也应该有一个解决方案。
我已经设置了一个带有 TD 元素边框的 html 表格。在现代浏览器中显示完美。但是，虽然可以争论，但我不会尽可能地支持 IE8。
坦率地说，IE8 对表格的边框做了一些奇怪的事情。我已经查看了这里提出的很多问题，但我发现没有一个问题可以解决我的情况。
表格的 TD 元素的所有边都应该有边框。IE8 只呈现左边框和下边框。正如您在下面的屏幕截图中看到的那样。代码位于图像下方。我找不到解决方案，希望你们中的一些人有任何想法。
非常感谢您的任何想法！链接：工作示例
CSS代码：
.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;
}
这是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>