Table width 100% is off by a single pixel (depending on actual width)

Question

I have a table in a div inside another div. The direct container has a width of 40%, and I want the table to be as wide as th

Answer 1

I had the same problem and managed to solve it by setting the width slightly higher:

width: 100.12%

I made an attempt to make the extra percentage small enough to solve most cases, but not create an overflow of 1 px.

It worked for me. This is somewhat of a dirty fix though.

Answer 2

I think it's to do with inset/outset borders - which are different between browsers. Try applying a border to the parent div instead of the table. This should sort it out.

Answer 3

The error replicates here for me on CHROME.

I inspected the element, and what I noticed is, the width of the table box was 217.443 px (obviously due to the % widths)

in the inspect element HTML section, it defines the width of the table as 218 px, and the containing div as 217px..

When I expand the broswer window slightly, thus making the table width increase past 217.443 px, to 217.680 px,

the HTML section displays BOTH the table width and the containing div as 218 px.

so im guessing the browser is rounding the pixels off to the nearest whole pixel.

could this be the right route to investigate?

edit: Try this and see if this works for you. I have fixed the problem (I think) in this jfiddle

http://jsfiddle.net/E2mUQ/3/

I simply removed the width on the .table class, and relaced it with DISPLAY:block