0

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?

4

2 回答 2

0

由于您不能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 更短。

于 2013-05-29T07:15:42.477 回答
0

您可以使用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 小提琴演示

于 2013-05-29T07:06:20.797 回答