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 this div, by setting width: 100%.

Relevant Markup

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

As you can see to the right, the border is a pixel to the left of that of the sibling div .info. These borders should align.

Relevant 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;
}

Seems like a rendering bug to me. It occurs in Chrome 34.0.1847.131, not in IE10. I can't reproduce it in IE10 or the current version of FireFox.

Answer 1

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

Answer 2

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 3

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.