1

テーブル内にコンテンツがあります:

<td>1</td>
<td>2</td>
<td>3</td>

表のセル自体にはスタイル (背景色や境界線など) がありますが、境界線の半径 (高さ、幅など) を使用して (画像を使用せずに) 数値の周りに円を配置したいのですが、そうではありません。余分なタグを追加したくない。

:before {content:<span>;}

レンダリングされたレベルで要素をラップしているため、問題ありません (およびその :after セレクター) が、コンテンツ属性は HTML タグをレンダリングしません。

これを行う方法はありますか、または各セルのコンテンツを別のタグでラップする必要がありますか? これは Cordova プロジェクト用であるため、ブラウザの互換性は Mobile Safari (webkit) です。考えられるすべての新しい方法を使用してください。

4

1 に答える 1

1

このようにしたらどうですか？

デモ

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

td {
    position: relative;
    height: 40px;
    width: 40px;
}

td:after {
    content: '•';
    color: #f00;
    position: relative;
    font-size: 90px;
    left: -20px;
    top: 23px;
    z-index: -1;
}
于 2013-05-09T09:53:13.600 に答える