html - 级联 html 表中的边框

Question

我必须显示一些数据。我认为在我的情况下使用表格而不是 div 更好，因为即使没有 css 也可以正确查看数据。

我的涉及级联表的解决方案显示了丑陋的边框偏移，您可以在此处看到:http://jsfiddle.net/u2rtfaa0/ .

我尝试使用这个指令，但它没有解决我的问题。

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0; 
    padding: 0; 
    margin: 0;
}

我想我做错了什么。

Answer 1

如果您注意到副标题在两侧和底部的宽度为 3px，因为它被标题边框、副标题边框和它自己的边框包围，您将在每个“ block ”上重新应用边框。发生这种情况是因为您将副标题放在新表格中，并将副标题放在表格内的表格内的新表格中。

删除多余的表格。像这样:http://jsfiddle.net/u2rtfaa0/2/

<table>
<tr>
    <th>Title</th>
    <th class=num>min</th>
    <th class=num>nom</th>
    <th class=num>max</th>
</tr>
<tr>
    <td>foo</td>
    <td class=num>123</td>
    <td class=num>222</td>
    <td class=num>432</td>
</tr>
<tr>
</table>
<table>
            <tr>
                <th>Subtitle</th>
                <th class=num>888</th>
                <th class=num>777</th>
                <th class=num>666</th>
            </tr>
            <tr>
                <td>foo</td>
                <td class=num>123</td>
                <td class=num>222</td>
                <td class=num>432</td>
            </tr>
</table>
<table>
                    <tr>
                        <th>SubSubtitle</th>
                        <th class=num>888</th>
                        <th class=num>777</th>
                        <th class=num>666</th>
                    </tr>
                    <tr>
                        <td>foo</td>
                        <td class=num>123</td>
                        <td class=num>222</td>
                        <td class=num>432</td>
    </tr>
</tr>
</table>