0

我有div一个内部的块table。

HTML：

<div id='ribbon'><table id='topMenu'>
<tr>
<td><a href='index.php'>Home</a></td>
<td><a href='links.php'>Links</a></td>
<td><a href='about.php'>About</a></td>
</tr>
</table></div>


CSS：

#ribbon {
    height: 40px;
    background-color: #C2F4FF;
    font-size: 11pt;
    line-height: 40px;
    padding: 0 0 5px 20px; }

a { text-decoration: none; }

#topMenu { height: 20px; }

#topMenu td { padding: 0 10px 0 10px; }

#topMenu td:hover { background-color: red; }


这是一个 100% 高度的屏幕截图，div指针位于“主页”上：http: //i.imm.io/1f7fd.png


我认为，不可见的边界是红色区域与顶部和底部table之间存在这些间隙的原因。div我想知道如何将那个td东西扩展到真正的 100% 高度，这样就没有间隙，并使红细胞占据整个div高度。

4

4 回答 4

3

将以下样式添加到您的 CSS：

#topMenu{
    border-spacing:0;
    border-collapse:collapse;
}

这是一个JSFiddle

但请不要将表格用于非表格数据 - 请参阅M1K1O 的答案。尽管您可能/可能会听到什么，桌子确实有它们的用途，但这不是其中之一。

于 2013-08-14T11:53:03.410 回答
3

尝试使用<ul> <li>而不是<table>：

<div id='ribbon'>
    <ul id='topMenu'>
        <li><a href='index.php'>Home</a></li>
        <li><a href='links.php'>Links</a></li>
        <li><a href='about.php'>About</a></li>
    </ul>
</div>

css

#ribbon {
    background-color: #C2F4FF;
    font-size: 11pt;
    line-height: 40px;
    padding: 0 0 5px 20px;
}
a {
    text-decoration: none;
}
#topMenu {
    height: 20px;
    margin:0 padding: 0;
}
#topMenu li {
    padding: 0 10px 0 10px;
    float:left;
    list-style-type:none;
}
#topMenu li:hover {
    background-color: red;
}

http://jsfiddle.net/d4eqq/

于 2013-08-14T11:54:15.850 回答
2

尝试使用border-collapseandborder-spacing属性。

http://www.w3.org/wiki/CSS/Properties/border-collapse

http://www.w3.org/wiki/CSS/Properties/border-spacing

于 2013-08-14T11:54:12.130 回答
0

你可以删除空间 border-spacing: 0;

于 2013-08-14T11:52:54.100 回答