I have parent child relationship table

http://jsfiddle.net/ZPSVg/

<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>

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;
}

Now both parent row and child row have borders. Parent rows have solid while child rows have dotted.

For child rows the dotted border should start where text starts rather at the left end.

w.r.t to the code for child rows it should start at 1.1 and 2.1

I tried to cut the border image and place it as background for tr positioning 20px from left but i am not able to get it work since i hav given repeat-x( for handling all screen size).

Is there any other work around for this? the text in parent and child rows should be inline

UPDATED the jsfiddle

the solution should support cross browser compatibilty from ie8, chrome , safari, firefox.

You are going to need to use an empty td with a set width in the child element and colspan that on the parent.

<tr>
     <td colspan="2">Parent</td>
</tr>
<tr>
     <td style="width: 20px;"></td><td>Child</td>
</tr>