Q:

CSS: Show checkmark in top right of a td

I am trying to show a checkmark in the top right corner of a td. I can't seem to get it there without expanding the whole tr. This is my 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>

I just tried using a class for the icon and making the tr relative and the td relative but it keeps expanding the td's height.
Any ideas?

A:

You can use first-child selector and background-position attribute to show icon on right top of first 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;
}

You can shorten this like 
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

