html – 表格上有负边距的奇怪事物

概述问题不是很短,但很容易理解. 这是jsFiddle 我有两个嵌套表,像这样： 这是标记： <table class="outer"> <tr> <td></td> <td> <table class="inner"> <tr> <td></td> <td></td> <td></td> 问题不是很短,但很容易理解.

这是jsFiddle

我有两个嵌套表,像这样：

这是标记：

<table >  <tr>    <td></td>    <td>      <table >        <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 >    <table >      <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;}

问题

>为什么这两个东西都会发生？
>有什么方法可以解决它？像我一样简单地使用包装器是一种好习惯,还是应该使用另一种更聪明的方法？

解决方法 如果主表是宽度：100％;它将一直扩展,内部表将采用最初的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/

总结

以上是内存溢出为你收集整理的html – 表格上有负边距的奇怪事物全部内容，希望文章能够帮你解决html – 表格上有负边距的奇怪事物所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。