Равное расстояние между ячейками таблицы - Вопросы по CSS

Как сделать чтобы расстояние между текстом в каждой ячейке было одинаковое? Нашел решение в виде
но ie 11 некорректно отображает

Как вообще такое реализовывается?
ps это меню в виде таблицы и нужно чтобы между каждым пунктом было одинаковое расстояние

Решение с псевдотаблицей вам не подойдёт. Попробуйте инлайн-блоками: http://xiper.net/examples/html-and-css-tricks/navigation/rubber-menu.html
Таблицей вы добьётесь в лучшем случае такого отображения: http://xiper.net/examples/html-and-css-tricks/navigation/rubber-block-menu3.html

решение с inline хорошее, но мне нужно чтобы активный пункт заливался фоном на всю часть псевдо ячейки а в inline зальется только сам текст

Тогда или flex (не кроссбраузерно) или JS.

а с js не подскажите где посмотреть демо?

На Jquery несложно написать самому.

а логика какая будет? Получается нужно вычислить количество букв в пункте меню и как то дальше вычислить padding чтобы он у всех пунктов был одинаковый, верно?

А чем меню выводите?

Можно переопределить шаблон модуля меню:

Вычисляем количество пунктов
$x = 100/количество;
<li style="width:<?php echo $x . '%'; ?>; box-sizing: border-box;"> ...

остальное задаете в CSS

Сам не пробовал, но по идее должно работать)

http://jsfiddle.net/Shustry/rcdup87t/5/

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

Ну считать символы точно не вариант. Они все разной длинный. Тогда нужно делать (алгоритм):
1. вычесть сумму длин пунктов и длины родителя
2. поделить это на кол-во пунктов
3. поделить на два и назначить левым и правым внутренним отступом для ссылки.
4. последний пункт придётся фиксить, т.к. не все браузеры одинаково дробные величины пикселей понимают.