html - 在表格菜单中的菜单项之间添加分隔符

Question

我有一个使用表格创建的菜单（如果可能，请提供不需要我更改为列表或其他内容的答案......对此道歉）

无论如何，我想在每个菜单项之间添加一个分隔符，除了被选中的项目。这意味着如果选择了一个菜单项，我希望border-right 不存在。请看一下附图：

如您所见，查询被选中；但是，知识菜单项的边框仍然可见。有什么办法可以去掉这个吗？

目前css如下：

div#nav a{
   color: #FFFFFF;
   border-right: 1px solid red;
}

div#nav td.selected a{
   color: #004466;
   border-right: none;
}

HTML：

    <div id="nav">
      <table id="navTable" cellspacing="0" cellpadding="0">
        <tr>
            <td><a href="Knowledge">Knowledge</a></td>
            <td><a href="Enquiries">Enquiries</a></td>
            <td><a href="Contact">Contact</a></td>
        </tr>
      </table>
    </div>

是否有任何 CSS 技巧可以帮助我删除“选定”菜单项旁边的项目的右边框？注意：如果有帮助，我也可以使用左边框。

任何见解都会非常有帮助。谢谢！！

Answer 1

这应该可以解决问题：

div#nav a {
   border-left: 1px solid red;
}

div#nav td:first-child a, div#nav td.selected a, div#nav td.selected + td a {
   border-left: none;
}

在这里看小提琴：http: //jsfiddle.net/zitrusfrisch/WNTBH/

Answer 2

div#nav td {
   color: #FFFFFF;
   border-right: 1px solid red;
}

div#nav td.selected {
   color: #004466;
   border-right: none;
}