Question

我有两个结构相似的表（main和child），它们有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;}

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

子表和父表的相同边框

1 个答案: