htmlテーブルの相対的位置付け

Question

この質問は、私がプロジェクトや何かをしているからではなく、私の心の中に来ました。それはちょうど私の頭の中に現れた。

私はposition:relativeは、テーブル要素とそのtop,left,bottom,right文句を言わない仕事には影響を与えません（スタックオーバーフローに関するいくつかの記事から）を読みました。

私はこれを試して、何らかの形で下のスニペットに示すようにth要素に影響することがわかりました。 topおよびleftのプロパティは実際にthで処理されました。

しかし、なぜこの効果についてはっきりしていないのですが、なぜthの国境がその場所にとどまっており、thだけが移行しましたか？なぜこのようなことが起こるかについてのアイディアはありますか？

ボーダーがthと一緒に移動できるかどうか本当に知りたいです。ここで

table { 
 
    border-collapse: collapse; 
 
} 
 
th { 
 
    border: 4px solid green; 
 
    position: relative; 
 
    top: 30px; 
 
    left: 30px; 
 
}

<table> 
 
    <tr> 
 
    <th>THIS</th> 
 
    </tr> 
 
</table>

tr, th, td要素の位置を設定するfiddle

Answer 1

は、クロスブラウザの考えではないです。その代わりに、あなたのコンテンツをあなたのth要素内のコンテナの中に置き、そのコンテナを相対的に配置してください。

<th><div>THIS</div></th> 

とスタイルは次のようになります。

th > div { border: 4px solid green;position: relative;top: 30px;left: 30px; } 

Working Fiddle

Answer 2

あなただけの表示を追加する必要があります：ブロックを。あなたの目の前に立つと、それはポジションを獲得します。あなたは内容を動かすだけなので、あなたはその場所を置くことはできません。

table { 
 
    border-collapse: collapse; 
 
} 
 
th { 
 
    display: block; 
 
    border: 4px solid green; 
 
    position: relative; 
 
    top: 30px; 
 
    left: 30px; 
 
}

<table> 
 
    <tr> 
 
    <th>THIS</th> 
 
    </tr> 
 
</table>