Как разделить ячейки таблицы CSS по ширине поровну?

Question

[Iliya V. Soldatkin]

Пожалуйста, помогите разобраться!
Дано:
.block {
display: table;
table-layout: fixed;
}

.block .block__item {
display: table-cell;
border: solid #fff 10px;
}

И три div-а.

Вот код: https://codepen.io/iliyasold/pen/mdbQXXe

Вопрос:
почему ширины этих дивов не делятся поровну?
Почему их разбивает на 447, 446 и 446 при ширине родителя 1339px?
Как сделать так, чтобы ширина была:
446,333333 у каждой ячейки, то есть, ровно одна треть?
Благодарю.

Comments

[Рома Зварич]

Iliya V. Soldatkin, Вам обязательно таблица нужна? Я так понимаю, причина в необходимости поддерживать IE? Если да, то какой версии? Вариант с Flexbox не подойдёт?

[dom1n1k]

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

Answer 1

[Сергей delphinpro]

Потому что дробных пикселей не бывает. Это неделимая величина.

Comments

[Iliya V. Soldatkin]

Хм.., а, как же здесь они получаются:

[Iliya V. Soldatkin]

Вот на grid все делится поровну:
https://codepen.io/iliyasold/pen/mdbQXXe

Подскажите, существуют ли какие-то варианты сделать также при display: table; ?

[Рома Зварич]

Iliya V. Soldatkin,

Вот на grid все делится поровну

Ну Вы сравнили. Технологию расчета Table и CSS Grid. Между ними, как мне кажется, минимум десяток лет разницы.
Предполагаю, что CSS Grid и Flexbox, являющиеся новыми технологиями, могут иметь другую систему расчета элементов внутри контейнера, поэтому и дробные пиксели появляются.

Возможно, выходом может являться расчет ширины дочерних элементов через JS

[Сергей delphinpro]

Iliya V. Soldatkin, Мало ли что показывает браузер =) В него заложены механизмы подгонки размеров для расчетов.
Чтобы не получалось, что три блока по 33,33% вдруг оказались меньше родителя на пикселью Такое, кстати, раньше встречалось, когда мамонты по земле ходили. Приходилось извращаться.

Померьте экранной линейкой. У меня получился средний блок шире остальных двух на один пиксель.

[Iliya V. Soldatkin]

Рома Зварич, Согласен, разница большая, да, Вы правы, JS - выход. Но, тут я просто "теоретизирвал на тему") А, вдруг уже тогда было можно)) Спасибо!

[Iliya V. Soldatkin]

Сергей delphinpro, ок, благодарю Вас!