HTML position absolute for a table - html

Question

I have a table that is inside a div. The div has a class="bar" and it is on the top of the screen. It has
top:0px;
left:0px;
right:0px;
The table inside this one, has 2 cells with a css hover that changes the color when you go over them with the mouse.
JSFiddle
Here you can see that when you go over C / C++ the grey background doesn't stay "inside" the div. I set the table to top:0px; left:0px; right:0px; but it is not fixed.
I want the grey rectangle to be inside the black div. What could I do?

Answer 1

The absolute positioning on the table isn't actually needed. You can remove that and then collapse the borders of your table using border-collapse: collapse:
#ontop {
width:100%;
text-align:center;
z-index:10;
border-collapse: collapse;
}
JSFiddle demo.

Answer 2

This css line will help you:
#bgrect { padding: 0; }

Answer 3

You forgot to set the border-spacing on the table to 0.
#ontop {
width:100%;
text-align:center;
top:0px;
left:0px;
right:0px;
position:absolute;
z-index:10;
border-spacing:0;
}
New fiddle.
(And while I agree that the absolute poisitioning is not needed in this example, I'm sure you have your reasons. You don't need the z-index though...)

Answer 4

You cannot have duplicate ID in one document!
Change #bgrect to .bgrect
<td width="50%" class="bgrect">
LIVE DEMO
CSS:
.bar{
/* NO BACKGROUND ! */
width:100%;
height:28px;
position:absolute;
top: 0;
left: 0;
font: 67.5%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#D8D8D8;
}
#ontop {
width:100%;
text-align:center;
top:0px;
left:0px;
right:0px;
position:absolute;
z-index:10;
border-collapse:collapse; /* collapse borders */
}
.bgrect{
background-color: #0C0C0C; /* initial bg */
}
.bgrect:hover {
background-color: #2E2E2E; /* hover bg */
cursor:pointer;
}