1

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

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

这个里面的表格有 2 个带有 CSS的单元格，hover当你用鼠标越过它们时会改变颜色。

JSFiddle

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

在此处输入图像描述

我希望灰色矩形位于黑色 div 内。我能做什么？

4

4 回答 4

2

table实际上并不需要绝对定位。您可以删除它，然后使用以下方法折叠表格的边框border-collapse: collapse：

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

JSFiddle 演示。

于 2013-10-27T19:29:48.067 回答
2

这条 css 行将帮助您：

#bgrect { padding: 0; }
于 2013-10-27T19:33:15.637 回答
1

您忘记将表格上的边框间距设置为 0。

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

新小提琴。

（虽然我同意这个例子中不需要绝对定位，但我相信你有你的理由。虽然你不需要 z-index ......）

于 2013-10-27T19:35:39.840 回答
1

你不能ID在一个文件中有重复！更改#bgrect为.bgrect

<td width="50%" class="bgrect">

现场演示

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;
}
于 2013-10-27T19:45:57.150 回答