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

我有一个

div

块，里面有一个

表

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>

#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

屏幕截图，指针指向“Home”：

---

我认为，不可见的

表格

边框是红色区域和

div

顶面和底面之间存在间隙的原因。我想知道如何将

td

扩展到真正的100%高度，这样就没有间隙，并使红细胞占据整个

div

高度。

您可以使用

---

边框间距：0
将以下样式添加到CSS中：

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

这里有一个

但请不要将表格用于非表格数据-请参阅。不管您可能会听到什么，表的确有其用途，但这不是其中之一。
尝试使用
边框折叠
和
边框间距
属性


试着用
代替
：

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

边框折叠
和
边框间距
是我问题的解决方案，但使用
也是一个不错的选择。谢谢，我将使用它。根据@F4r-20，导航结构的最佳方式是
<代码>
仅用于表格。我不太理解“非表格数据”。单行菜单是否可以视为非表格数据？我想这只是一个水平列表。参见关于表格数据
#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;
}