I am faced with a challenge involving two tables, one main and one child, both with 3 columns each. The child table is located within a row of the main table. My objective is to display these two tables as one cohesive unit with consistent borders. However, I have noticed that in certain browsers (such as Chrome), the border of the child table appears misplaced. How can I rectify this issue?
.html
<table class="main_table" cellpadding=0 cellspacing=0>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
</tr>
<tr>
<td colspan=3 class="child_table_wrap">
<table cellpadding=0 cellspacing=0 class="child_table">
<tr>
<td>child_col1</td>
<td>child_col2</td>
<td>child_col3</td>
</tr>
<tr>
<td>child_val1</td>
<td>child_val1</td>
<td>child_val1</td>
</tr>
</table>
</td>
</tr>
</table>
.css
table {border-collapse: collapse;}
table.main_table {border: 1px solid black; border-width: 1px 0 0 1px;}
td {width: 33%; border: 1px solid black; border-width: 0 1px 1px 0;}
td.child_table_wrap {border-width: 0;}