CSS - 显示：表，固定宽度得到小数

Question

I am having an issue in Chrome where a fixed width div is not displaying properly. Please see my jsFiddle .

I have three nested divs.

 .container { background: red; width: 375px; } 

 <div class="container"> <div style="display: table; width: 375px; background: red;"> <div style="display: table-cell; width: 375px; background: blue"> Content </div> </div> </div> 

I have also given class "container" a fixed width of 375px. But, in Chrome, the table is actually coming back with a width of 374.4px instead of 375. As a result, some of the background container div is seen to the right side of the table. I have tried multiple combinations of table-collapse, box-sizing and table-display properties but can't seem to get this right. Any ideas?

Using Chrome: 58.0.3029.81

Answer 1

use this CSS:

table-layout: fixed

<div style="display: table; table-layout:fixed; width: 375px; background: red;">