html – 表行不会包含position：absolute的元素

概述我有这样的表： <table cellspacing="0"> <tr> <td>Row 1</td> <td><button>Button 1</button></td> </tr> <tr> <td>Row 2</td> <td><button>Button 2</button></td> </tr 我有这样的表：

<table cellspacing="0">    <tr>        <td>Row 1</td>        <td><button>button 1</button></td>    </tr>    <tr>        <td>Row 2</td>        <td><button>button 2</button></td>    </tr>    <tr>        <td>Row 3</td>        <td><button>button 3</button></td>    </tr></table>

我想绝对把每个按钮放在表格行的右上方,所以我使用这个CSS,期望< tr>包含< button&gt ;::::

tr {    position:relative;}button {   position:absolute;   top:0;   right:0;   }

但是,这些按钮在相同的位置上都堆叠在彼此的顶部.它通常使用< div> s可以正常工作,但是在使用我在测试时发现的display：table-row时,它仍然会以这种方式表现,并且对我来说是一个惊喜.

演示：http://jsfiddle.net/QU2zT/1/

注意：我的实际标记更复杂,我想要定位的元素可能会出现在它的行中的任何表格单元格的任何位置,这就是为什么我相信我需要position：absolute.

为什么会发生这种情况？
>如何使用CSS解决这个问题,而不改变标记？

编辑：firefox中的结果与Chrome和IE9不同(尚未测试). FF是一个完整的失败,而其他浏览器只能在demo中看不到包含“具有表显示的div”设置.

解决方法 引用 spec：

The effect of ‘position:relative’ on table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell,and table-caption elements is undefined.

编辑：

我可以看到的唯一的解决方案是使用：last-child(即没有IE< 9)和好的旧的vertical-align和text-align：

td:last-child {    vertical-align: top;    text-align: right;    padding: 0;    margin: 0;}

这是一个工作演示：http://jsfiddle.net/QU2zT/15/

我也想补充一点,如果你真的不想改变你的标记,并且需要支持IE,你可以使用这个解决方案与JavaScript结合使用.

PS：我没有看到(并且不会评论)解决方案使用div,因为我没有看到没有任何意义的写作,以获得一个表,当已有一个很多的标记.这只会是一场维护噩梦.

总结

以上是内存溢出为你收集整理的html – 表行不会包含position：absolute的元素全部内容，希望文章能够帮你解决html – 表行不会包含position：absolute的元素所遇到的程序开发问题。

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