Adding separator between menu items in a table menu

Question

I have a menu that's been created using a table (if possible, please provide answers that do not require me to change to a list or something else... apologies about that)

Anyway, I'd like to add a separator between the each menu item except for the item that is selected. Meaning if a menu item is selected I would like border-right to not exist. Please have a look at the attached image:

As you can see, enquiries is selected; however, the border from the knowledge menu item is still visible. Is there any way to remove this?

At the moment the css is as follows:

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>

Are there any CSS tricks that would help me in removing the border-right of the item that's next to the 'selected' menu item? Note: if it helps I can use border-left too.

Any insight would be extremely helpful. Thank you!!

Answer 1

This should do the trick:

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

See fiddle here: http://jsfiddle.net/zitrusfrisch/WNTBH/