Question

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

这是div的100％高度屏幕截图，指针位于“Home”： http://i.imm.io/1f7fd.png

我认为，隐形table边界是红色区域与div顶部和底部之间存在间隙的原因。我想知道如何将td事物扩展到真正的100％高度，以便没有间隙，并使红细胞占据整个div高度。

Answer 1

将以下样式添加到CSS中：

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

这是JSFiddle

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

Answer 2

尝试使用<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/

Answer 3

尝试使用border-collapse和border-spacing属性。

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

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

Answer 4

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

使用CSS从表中删除不可见的边框

4 个答案: