受限于CSS-2.1，我可以确保表格中的一个边框显示在顶部＆＃39;边框折叠时的另一个边框

Question

在这种情况下，图片比文字更有价值。看看顶部，黑色条和浅灰色，“左”和“右”之间的垂直条的交叉点是浅灰色而不是黑色？有没有办法确保一个边界显示在另一个边界之上，有点像z-index？

外观如何：

我希望它看起来如何（使用图像编辑器进行调整）：

这是我的问题的jsfiddle。如果您不喜欢jsfiddle，无论出于何种原因，我的HTML和CSS都在下面。

HTML：

<table id="tiresTable" class="table">
<tr class="firstRow">
    <td class="thSim">Tires:</td>
    <td class="thXAxis borderRight">Left</td>
    <td class="thXAxis">Right</td>
</tr>
<tr class="borderBottom">
    <td class="thYAxis">Front</td>
    <td class="borderRight"></td>
    <td></td>
</tr>
<tr class="borderBottom">
    <td class="thYAxis">Rear</td>
    <td class="borderRight"></td>
    <td></td>
</tr>
<tr>
    <td class="thYAxis">Spare</td>
    <td colspan="2"></td>
</tr>
</table>

CSS：

#tiresTable{
    border-collapse: collapse;
}
#tiresTable tr.firstRow td{
    border-bottom: 1px solid black;
}
#tiresTable td.thSim, #tiresTable td.thYAxis{
    border-right: 1px solid black;
}
#tiresTable td.borderRight{
    border-right: 1px solid lightgrey;
}
#tiresTable tr.borderBottom{
    border-bottom: 1px solid lightgrey;
}

请注意，由于技术限制，我无法使用CSS3属性。另请注意，如果您能够比我更有说服力地描述问题，那么如果您编辑我的问题标题，我将不会被冒犯。

Answer 1

修改

有点hacky，但我能够做一些你需要的工作。

<强> HTML：

<table id="tiresTable" class="table">
<tr class="firstRow">
    <td class="thSim">Tires:</td>
    <td class="thXAxis borderRight">Left</td>
    <td class="thXAxis">Right</td>
</tr>
    <tr class="border-bottom">
        <td colspan="3"><div class="black"></div></td>
    </tr>
<tr class="borderBottom">
    <td class="thYAxis">Front</td>
    <td class="borderRight"></td>
    <td></td>
</tr>
<tr class="borderBottom">
    <td class="thYAxis">Rear</td>
    <td class="borderRight"></td>
    <td></td>
</tr>
<tr>
    <td class="thYAxis">Spare</td>
    <td colspan="2"></td>
</tr>
</table>

<强> CSS：

#tiresTable{
    border-collapse: collapse;
}
#tiresTable tr.borderBottom{
    border-bottom: 1px solid lightgrey;
}
#tiresTable td.borderRight{
    border-right: 1px solid lightgrey;
}

#tiresTable td.thSim, #tiresTable td.thYAxis{
    border-right: 1px solid black;
}

.border-bottom {
    height: 1px;
}

.border-bottom td {
    height: 1px;
    border: 0px;
    padding: 0px;
}

.black {
    background-color: black;
    height: 1px;
}

我删除了任何不需要的内容，并使用更改的类名称来轻松了解新内容和不适合内容。

小提琴：http://jsfiddle.net/ru92py4m/15/