0

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

http://jsfiddle.net/yCSnf/

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

1 回答 1

1

更改这行 css:

td {width: 33%; border: 1px solid black; border-width: 0 1px 1px 0;}

对此:

td {width: 33.334%; border: 1px solid black; border-width: 0 1px 1px 0;}

评论更新

在这种情况下,添加一个固定宽度的容器:

.container {
    200px; //Or whatever.
}

HTML

<div class="container">
    <table class="main_table" cellpadding=0 cellspacing=0>
    //...
    </table>
</div>

http://jsfiddle.net/vsDwC/1/

于 2013-04-15T16:36:35.837 回答