Hide table header <th> existence fully and on hover display it - html

Question

i want to hide <th> such a way that happens when we give display:none but if i use this property i can't display it on mouse hover.i placed an up arrow inside the th to point something on hovering the table;
** When my table is not in hovered state those th remain hidden but there remain blank space which i do not want.**
I have tried using like this margin-top:-555px; and on hover margin-top:0 but does not work.
i do not want the red mark area but hover state on given link is ok for me.
please help.
jsfiddle
<div class="existing_items">
<table cellspacing="0">
<th class="pointer"colspan="2"><span>^</span></th>
<tr><th class="" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table:hover th.pointer{
visibility:visible;
}
table th.pointer{
color:red;
visibility:hidden;
font-size:20px;
}
.leftname{
border-right:1px solid #eaeaea;
}

Answer 1

I add position:inherit; in your table:hover th.pointer and it works;
You can try here:
http://jsfiddle.net/gkiwi/t7eecbzp/
Or
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table:hover th.pointer{
visibility:visible;
top:-10px;
left:20px;
position:inherit;
}
table th.pointer{
color:red;
visibility:hidden;
font-size:20px;
overflow:hidden;
position:absolute;
top:-20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
<div class="existing_items">
<table cellspacing="0">
<th class="pointer"colspan="2"><span>^</span></th>
<tr><th class="" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>

Answer 2

I would suggest to not use an extra (useless) <th> for this purpose. You could instead use a pseudo-element on your title <th>, as they seems highly related. See my example below:
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table th.with-arrow {
position: relative;
}
table:hover th.with-arrow:after{
content: "^";
position: absolute;
left: 10px;
top: 0;
color: red;
font-size:20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
<div class="existing_items">
<table cellspacing="0">
<tr><th class="with-arrow" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>