表格的HTML位置绝对值

Question

我有一个div内的表。 div有一个class="bar"，它位于屏幕的顶部。它有

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

这个表中的表有2个单元格，其中有一个css hover，当你用鼠标移过它们时会改变颜色。

JSFiddle

在这里你可以看到，当你越过C / C++时，灰色背景不会留在div里面。我将表格设置为top:0px; left:0px; right:0px;，但不是固定的。

我希望灰色矩形在黑色div中。我该怎么办？

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-index ...）

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;
}