The width of the table is 100% disabled by one pixel (depending on the 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 this div, setting width: 100% .

Appropriate markup

This works most of the time, however , depending on the width of the browser window, the width of the table is sometimes turned off by one pixel:

As you can see on the right, the border is the pixel to the left of the div .info section. These boundaries must match.

Matching CSS

 #userListContainer{width: 40%; float: left; } .info{display:block;line-height:22px; height:22px; padding-left:10px; } #userListContainer .info {border-right: 1px solid #999999;} .userList { width: 100%; border-right: 1px solid #999999; word-break: break-all; border-spacing: 0; border-collapse: separate; } 

Looks like a rendering error. This happens in Chrome 34.0.1847.131, not in IE10. I cannot play it in IE10 or in the current version of FireFox.

Answer 1

The error is repeated here for CHROME.

I checked the element and I noticed that the table field width was 217.443 px (obviously due to the% width)

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

When I expand the browser window a little, thereby increasing the width of the table to 217,443 px, to 217,680 px,

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

so I assume the browser rounds the pixels to the nearest integer pixel.

Could this be the right way to research?

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

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

I just removed the width in the .table class and linked it to DISPLAY:block

Answer 2

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

 width: 100.12% 

I tried to make the extra percentage small enough to solve most cases, but not create a 1 px overflow.

It worked for me. Although this is a bit dirty decision.

Answer 3

I think this applies to insert / exit boundaries that differ between browsers. Try applying a border to the parent div instead of the table. That should figure it out.