0

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 の高さを拡張し続けます。

何か案は？

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 に答える