html – CSS：在表格单元格中使用绝对位置的神秘填充

概述当我尝试在表格单元格中绝对定位div元素时,我遇到了一种奇怪的行为.为了实现绝对定位,我使用了一个包含div元素的位置：relative： HTML <table> <colgroup> <col width="200px"></col> <col width="300px"></col> </colgroup> <thead> 当我尝试在表格单元格中绝对定位div元素时,我遇到了一种奇怪的行为.为了实现绝对定位,我使用了一个包含div元素的位置：relative：

HTML

<table>    <colgroup>        <col wIDth="200px"></col>        <col wIDth="300px"></col>    </colgroup>    <thead>        <tr>            <th>Caption 1</th>            <th>Caption 2</th>        </tr>    </thead>    <tbody>        <tr>            <td><div ><div >abs</div></div></td>            <td>Content 2</td>        </tr>    </tbody>    </table>

CSS

table {     wIDth: 100%;     border-collapse: collapse;     table-layout: fixed;}th,td {    border-bottom: 1px solID black;    padding: 0;    margin: 0;}.wrapper {    background-color: green;    position: relative;    wIDth: 100%;    border-top: 1px solID blue;}.abs {    position: absolute;    margin: 0px;    padding: 0px;    background-color: red;}

FIDDLE

如您所见,包装器div与包含表格单元格的顶部之间存在间隙.如果我将abs元素更改为position：relative,则此间隙将消失.

那么这个差距来自哪里,我该如何预防呢？

解决方法 由于你将.abs从正常的页面流中取出,.wrapper不再有任何内容,因此它会自行折叠,你看到的只是它顶部的边框.

它位于单元格的垂直中间,因为中间是td和ths的默认垂直对齐样式.

如果我们在混合中添加一个不间断的空间,可以更好地证明这一点：

table {    wIDth: 100%;    border-collapse: collapse;    table-layout: fixed;}th,td {    border-bottom: 1px solID black;    padding: 0;    margin: 0;}.wrapper {    background-color: green;    position: relative;    wIDth: 100%;    border-top: 1px solID blue;}.abs {    position: absolute;    top:0;    margin: 0px;    padding: 0px;    background-color: red;}

<table>    <colgroup>        <col wIDth="200px"></col>        <col wIDth="300px"></col>    </colgroup>    <thead>        <tr>            <th>Caption 1</th>            <th>Caption 2</th>        </tr>    </thead>    <tbody>        <tr>            <td>                <div >&nbsp;                    <div >abs</div>                </div>            </td>            <td>Content 2</td>        </tr>    </tbody></table>

总结

以上是内存溢出为你收集整理的html – CSS：在表格单元格中使用绝对位置的神秘填充全部内容，希望文章能够帮你解决html – CSS：在表格单元格中使用绝对位置的神秘填充所遇到的程序开发问题。

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