Добавление разделителя между пунктами меню в меню таблицы

Question

У меня есть меню, которое было создано с использованием таблицы (если возможно, предоставьте ответы, которые не требуют от меня изменения в списке или что-то еще ... извинения)

В любом случае, я хотел бы добавить разделитель между каждым пунктом меню, за исключением выбранного элемента. Значение, если выбран пункт меню, я хотел бы, чтобы границы справа не существовали. Пожалуйста, обратите внимание на прилагаемом изображении:

Как вы можете видеть, выбирают запросы; однако граница из пункта меню знаний все еще видна. Есть ли способ удалить это?

На данный момент КСС следующим образом:

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 трюков, которые помогли бы мне в удалении пограничного права пункта, что это рядом «выбранный» пункт меню? Примечание: если это помогает, я могу использовать также border-left.

Любое понимание было бы чрезвычайно полезно. Спасибо!!

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