blogですかい

株式会社Loco Partnersに勤めるエンジニアうちの一人のブログ。仕事、プライベートで学んだことなどを発信し、その内容がたとえ少数でも誰かの役に立ったらなら、それはとっても嬉しいなって

<th>や<td>にpositionの指定はできません

htmlの仕様上、<th>や<td>にpositionの指定はできません。

例えば、

<td style="position: relative;>
    <span style="top: 10px; right: 10px; position: absolute;">あ</span>
</td>

と書いた場合、「あ」は<td&td;の右上から10pxのところに表示されません、htmlの仕様では。

ところが多くのWebkitなブラウザやTridentなブラウザではtdの右上から10pxのところに表示されます。それは独自実装によるものであり、Web標準ではありません。

実際、Firefoxでは<td>にpositionを付けても効きません。

ではどうすれば良いのか

<td>
    <div style="position: relative;">
        <span style="top: 10px; right: 10px; position: absolute;">あ</span>
    </div>
</td>

と、いうように、<td>に<div>を内包して、その<div>にpositionを付ければ良いです。