11

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

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:

Pixel errror

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.

MarioDS
  • 12,895
  • 15
  • 65
  • 121

3 Answers3

9

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

user1953045
  • 206
  • 5
  • 14
  • I find it strange that the browser would calculate the width of a `100%` element seperately from whichever container it is in. Moreover, the calculation should return the same number at least for my `.info` div and the table. – MarioDS May 09 '14 at 11:39
  • http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected – user1953045 May 09 '14 at 11:42
  • 1
    hmm, from doing research about this sub pixel rendering problem, it seems there is no quick fix for it. (some people have used Javascript) But at least you know WHY this problem occurs now and can look at ways to solve / get around it. good luck. – user1953045 May 09 '14 at 12:10
  • 2
    What can you do if your table element has `table-layout: fixed;`? If you set `display: block;` too on the table, the table is not sized correctly. – tonix Mar 28 '17 at 16:55
4

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.

Thijs Riezebeek
  • 1,762
  • 1
  • 15
  • 22
  • 3
    You could also use `width: calc(100% + 0.5px)` (or some other value), which would work at any scale. I don't know about browser compatibility though. – NotEnoughData Jul 04 '17 at 12:43
  • 1
    @NotEnoughData This worked as a quick fix, but I had to use 1px. Using 0.5px still showed a gap. – alstr Jun 07 '19 at 12:20
0

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.

Prinsig
  • 245
  • 3
  • 9
  • what do you mean with inset/outset borders? Also, if I apply the border to the parent div, the page breaks because there is a div next to it taking the remainder of the width (set to 60%). – MarioDS May 09 '14 at 11:47