html - 仅限于 CSS-2.1，当边框折叠时，我能否确保表格中的一个边框显示另一个边框的 'on top'

Question

在这种情况下，图片比文字更有值(value)。看到顶部的黑色条和浅灰色的交叉点，“左”和“右”之间的垂直条是浅灰色而不是黑色的吗？有没有办法确保一个边框显示在另一个边框的“上方”，有点像 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;
}

我删除了所有不是真正需要的东西，并使用更改的类名来轻松了解什么是新的，什么不是。

fiddle :http://jsfiddle.net/ru92py4m/15/