缩进表格行 <tr> 的边框

Question

我有父子关系表

http://jsfiddle.net/ZPSVg/

html

<table>

<tr class="parent_row">
    <td >1</td>
    <td>2</td>
    <td>3</td>
    <td><a>Link</a></td>
    <td style="width:20px;"></td>
</tr>
<tr class="child_row">
    <td >1.1</td>
    <td>2.1</td>
    <td>3.1</td>
    <td><a>Link_child</a></td>
</tr>
<tr class="parent_row">
    <td >1</td>
    <td>2</td>
    <td>3</td>
    <td><a>Link</a></td>
    <td style="width:20px;"></td>
</tr>
<tr class="child_row">
    <td >1.2</td>
    <td>2.2</td>
    <td>3.2</td>
    <td><a>Link_child</a></td>
    <td style="width:20px;"></td>
</tr>
</table>

CSS

table{
    margin:0;
    padding:0;
    width:100%;
    border-collapse: collapse;
    border-spacing: 0;
}

tr{
    border-color: #D8D8D8;
    border-style: solid;
    border-width: 1px 0 0;
    line-height:2em;
    font-size:14px;
}

td:first-child{
    padding-left:20px;
}

.child_row{
    border-style:dotted;
}

现在父行和子行都有边框。父行为实线，子行为虚线。

对于子行，虚线边框应从文本开始的位置开始，而不是从左端开始。

关于子行的代码，它应该从 1.1 和 2.1 开始

我尝试剪切边框图像并将其放置为距左侧 20px 的 tr 定位的背景，但我无法使其工作，因为我已经给出了重复 x（用于处理所有屏幕尺寸）。

还有其他解决办法吗？父行和子行中的文本应内联

更新了 jsfiddle

该解决方案应支持 ie8、chrome、safari、firefox 的跨浏览器兼容性。

Answer 1

由于 tr 不接受边距或填充，我无法进行这样的缩进。

您尝试过与选择器td一起使用吗first-child？就像这样：

tr.child_row td:first-child { padding-left:20px; }

或者，如果您想缩进子行的每个单元格（看看您的示例，这有点有意义），请删除 :first-child:

tr.child_row td { padding-left:20px; }    

http://jsfiddle.net/ZPSVg/23/更新了 jsFiddle 以显示后者。