Jones Vinoth Joseph Jones Vinoth Joseph - 9 days ago 5
CSS Question

Relative positioning a th in html table

This question came to my mind not because i am doing a project or something. It just popped up in my head.

I have read (from some posts on stack overflow) that

position:relative
does not affect table elements and that
top,left,bottom,right
wont work.

I tried this and found that it does affect the
th
element as shown in below snippet in some way.
top
and
left
properties actually worked on
th
.

But one thing isnt so clear about this effect, why is it that the border of the
th
stayed at its place and only the
th
migrated??? Any ideas as to why this happens?

I would really like to know if the border could be moved along with the
th
.



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

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





Here is a fiddle

Answer

Setting position on tr, th, td elements is not a cross-browser idea. so instead of that, put your content inside a container inside your th element and position relatively that container.

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

And the style would be:

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

Working Fiddle