Jones Vinoth Joseph Jones Vinoth Joseph - 9 months ago 46
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

does not affect table elements and that
wont work.

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

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

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

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


Here is a fiddle

Answer Source

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.


And the style would be:

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

Working Fiddle