css - 将 div 绝对定位在 tr 内

Question

我有一个表格，用于显示类似 excel 的数据。我需要在每一行的顶部中央完全放置两个图标——我想在用户将鼠标悬停在任何行上时显示编辑/删除图标。

当我尝试向 TR 添加相对位置并为我的内部 float div 添加绝对定位时，css 忽略父 td 的相对定位并简单地 float 到屏幕顶部:

http://jsfiddle.net/85aTs/2/

---

HTML

<table>
     <tr>
        <td>
            fooasfdasdfasf
        </td>
        <td>
            barasdfasfas
        </td>
    </tr>
    <tr>
        <td>
            fooasfdasdfasf
        </td>
        <td>
            barasdfasfas
        </td>
        <div class="absolute">
            I should be in a row
        </div>
    </tr>
</table>

---

CSS:

table, td{
    border: 1px solid #000;
}

tr {
    position:relative;
}
.absolute {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #000;
    background-color: yellow;
}

---

我知道这不是有效的 html，因为它是当前设置的，但是如何在不切换到具有表格显示属性的 div 的情况下实现我想要的？

Answer 1

这是我会做的:

See working jsFiddle demo

---

HTML

<table>
    <tr>
        <td>
            <div class="icons">
                <img class="checkmark" />
                <img class="crossmark" />
            </div>
            <table>
                <tr>
                    <td>fooasfdasdfasf</td>
                    <td>barasdfasfas</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <div class="icons">
                <img class="checkmark" />
                <img class="crossmark" />
            </div>
            <table>
                <tr>
                    <td>fooasfdasdfasf</td>
                    <td>barasdfasfas</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

---

CSS

table, td 
{
    border: 1px solid #000;
}
.icons 
{
    height: 16px;
    text-align: center;
    background: #bbb;
}
.checkmark
{
    display: inline;
    height: 16px;
    width: 16px;
    border: none;
    background: url('http://www.actuary.com/directory/template/default/images/icon_checkmark.gif');
}
.crossmark
{
    display: inline;
    height: 16px;
    width: 16px;
    border: none;
    background: url('http://researchautism.net/img/rating_icons/crossmark_sm.png');
}

---

结果