我有两个结构相似的表(主表和子表),它们有 3 列,子表位于主表行中。我想将这些表格显示为一个具有相同边框的表格,但对于不同的浏览器,子表格边框错位(例如 chrome),我该如何解决?
.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;}