html - CSS:在 td 的右上角显示复选标记

Question

我试图在 td 的右上角显示一个复选标记。如果不扩展整个 tr，我似乎无法到达那里。这是我的 table :

<tr style="position:relative;>
    <td><p class="mark" style="position:relative; left:10px;></p><input type="text"></td> <-- in this td the icon should be placed. 
     ...more rows...
</tr>

我只是尝试为图标使用一个类并使 tr 相对和 td 相对，但它不断扩展 td 的高度。

有什么想法吗？

Answer 1

您可以使用first-child 选择器和background-position 属性在第一个td 的右上角显示图标

tr:first-child td:first-child
{
    background-image:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png');
    background-position:right top;
    background-repeat:no-repeat;
    padding-right:35px;
    padding-top:5px;
    padding-bottom:5px;
}

你可以像这样缩短

tr:first-child td:first-child
    {
        background:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png') no-repeat right top red;
        padding:5px 35px 5px 0
    }

JS Fiddle Demo