Позиция HTML абсолютная для таблицы

Question

У меня есть таблица, которая находится внутри div. У div есть class="bar", и он находится в верхней части экрана. Он имеет

top:0px; 
left:0px; 
right:0px; 

Таблица, внутри этого, имеет 2 ячейки с КАС hover, который меняет цвет, когда вы идете на них мышью.

JSFiddle

Здесь вы можете увидеть, что, когда вы идете на C/C++ серый фон не остается «внутри» дел. Я установил таблицу в top:0px; left:0px; right:0px;, но это не исправлено.

Я хочу, чтобы серый прямоугольник быть внутри черными делами. Что я мог сделать?

Answer 1

Абсолютное позиционирование на table на самом деле не требуется. Вы можете удалить это, а затем свернуть границы вашего стола с помощью border-collapse: collapse:

#ontop { 
    width:100%; 
    text-align:center; 
    z-index:10; 
    border-collapse: collapse; 
} 

JSFiddle demo.

Answer 2

Эта линия CSS поможет вам:

#bgrect { padding: 0; } 

Answer 3

Вы забыли установить пограничную-интервал на столе 0.

#ontop { 
    width:100%; 
    text-align:center; 
    top:0px; 
    left:0px; 
    right:0px; 
    position:absolute; 
    z-index:10; 
    border-spacing:0; 
} 

New fiddle.

(И хотя я согласен, что абсолютное poisitioning не требуется в этом примере, я уверен, что у вас есть причины. Вам не нужно Z-индекс, хотя ...)

Answer 4

Вы не можете иметь дублировать ID в одном документе! Изменение #bgrect в .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; 
}