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

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.