In my database, there is a table that shows the parent-child relationship.
Check out this link for more details
The HTML structure of the table is as follows:
<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>
Here's the CSS used for styling the 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;
}
The current setup displays borders for both parent and child rows, with solid borders for parents and dotted borders for children. The issue arises where the child row's border starts from the left edge instead of aligning correctly with the text.
I attempted to address this by using a background image positioned 20px from the left for tr elements, but it didn't work due to repeat-x setting for handling various screen sizes.
Is there an alternative solution to ensure the borders in parent and child rows behave as expected?
Updated the interactive demo on jsfiddle
This solution needs to be compatible across different browsers including IE8, Chrome, Safari, and Firefox.