Как заменить разделители столбцов на •?

Question

[0leg5ergeev]

https://jsfiddle.net/ykoq337p/
моё творенье: минус заключается в том, что "•" не на месте, ибо ширина каждой ячейки отличается и вообще всё плохо.
Должно быть примерно так:

подскажите, как сделать хорошо и красиво?

Answer 1

[0leg5ergeev]

Решилось применением свойства float для псевдо-класса, всем спасибо

Answer 2

[Alexej Simakov]

элементы таблицы рендерятся браузером как таблица. изменить это поведение нельзя. Я на скорую руку вижу два выхода. Либо переписать все на div-ах либо выключить отображение границ ячейки и добавить между ячейками еще по одной тонкой и туда положить точки.

Answer 3

[Милок Мурлыка]

Я думаю легче будет попасть в рамки, если ячейке задать

td {
position: relative;
}

а псевдо-элементам

td:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px//(минус половина ширины от самого псевдоелемента);
margin-top: -9px;//(минус половина высоты от самого псевдоелемента);
}

Кружочки думаю лучше сделать так:

td:after {
width: 4px; //подобрать на свой вкус
height: 4px; //подобрать на свой вкус
border-radius: 50%;
background-color: #000; //подобрать на свой вкус
}