将div放在tr内

Question

我有一张表用于显示类似excel的数据。我需要在每行的顶部中心绝对放置两个图标 - 我想在使用鼠标悬停在任何一行上时显示编辑/删除图标。

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

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');
}

---

结果