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

html – 表格上有负边距的奇怪事物,第1张

概述问题不是很短,但很容易理解. 这是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 – 表格上有负边距的奇怪事物所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1127971.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存