这个问题不是很短,但很容易理解。
这是jsFiddle
我有两个嵌套表,如下所示:
以下是标记:
<table class="outer">
<tr>
<td></td>
<td>
<table class="inner">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<style>
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.outer {
height: 100px;
}
.inner {
background-color: #ccc;
height: 50px;
}
</style>
第一件奇怪的事
然后,我想在内部表格中添加一个负的水平边距:
.inner {
margin: 0 -10%;
}
预期输出如下所示:
但相反,我得到了:
问题可以通过将内部表放在DIV中来解决:
<!-- outer table -->
<div class="wrapper">
<table class="inner-wrapped">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!-- outer table -->
<style>
.wrapper {
margin: 0 -10%;
}
.inner-wrapped {
background-color: rgb(0,200,0);
height: 50px;
}
</style>
第二奇怪的事
如果我设置负水平边距-10px(以前我们使用的是百分比,而不是像素),那么除此之外,该表只向左移动(如在第一种情况下),其宽度会显著减小:
.inner {
margin: 0 -10px;
}
问题
为什么这两种情况都会发生?
解决问题的方法是什么?像我这样简单地使用包装器是一个好的实践,还是我应该使用另一种更聪明的方法?
最佳答案
如果主表width:100%;
只要没有内容,负利润就不会扩大它。
如果:https://jsfiddle.net/md2tx2d4/2/
.inner { margin:0 -10%; width:120%;}
或者如果你让它无宽度地生活,让它从内容中成长
table { }
td {width:200px;/* instead real content missing here */}
https://jsfiddle.net/md2tx2d4/1/