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，则会在每个“块”上重新应用边框，因为它被标题边框，字幕边框和自己的边框包围。发生这种情况是因为你将字幕放在一个新表中，并在表格中的新表格中加入子字幕。

删除额外的表格。像这样：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>

Answer 2

我在这里提出了一个解决方案，现场演示http://jsfiddle.net/u2rtfaa0/9/

基本上我将margin:-1px添加到所有表格和元素中，你现在的css是这样的：

table { 
width: 100%;
}

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

.num {
width: 50px;
}

但我必须将宽度从100％更改为某个值，因为右侧会出现额外的空白区域。但是，如果您想使其仍为100％，请尝试将-1个边距添加到各种元素。

Answer 3

您必须如图所示关闭每个表格并添加保证金：-1px http://jsfiddle.net/u2rtfaa0/11/

<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>
</table>
<tr>
<td colspan=4>

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

<td colspan=4>
 <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>
 </table> 
 </td>                        

 </td>
</tr>

CSS

table { 
width: 100%; 
}

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

.num {
width: 50px;
}

级联html表中的边框

3 个答案: