Question

我想在td的右上角显示一个复选标记。如果不扩展整个tr，我似乎无法实现它。这是我的表：

<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

Answer 2

由于您无法对表格单元格使用position规则（标准禁止，只有Gecko严格执行），您必须使用内部其他元素的变通方法，或使用其他解决方案。此外，您不应该为这样的“语义”内容生成图像，使用类，使其更容易生成，并且易于使用JS进行操作。

HTML

<table>
<tr>
    <td class="checked">...data 1...<br>multiline</td>
</tr>
<tr>
    <td>...data 2...</td>
</tr>
<tr>
    <td class="checked">...data 3...</td>
</tr>   
</table>

CSS

td{
    background:#fcf4cf;
}
td.checked:before {
    content:url(http://www.kyoceradocumentsolutions.com.au/Style%20Library/en-us/Images1/TickMark.gif);
    float:right;
    padding-left:4px;
}

See this work on JSFiddle

这与所有主流浏览器兼容，并且在语义上比您当前的方法更正确，CSS和HTML更短。

CSS：在td的右上角显示复选标记

2 个答案:

HTML

CSS