html - Why TD width is not working or not followed?

Question

Original question: Does HTML <table> have a default width?

Recently someone asked a question somewhere along these lines, and got me wondering.

Take this for example.

http://jsfiddle.net/rqmNY/1/

In this fiddle, if you were to check its width (I'm using inspect element from chrome), it shows 100px, working as intended.

Lets add a few more "td"s in, and we shall see that the "td:100px" css is being ignored.

http://jsfiddle.net/rqmNY/2/

As you can see, now it's 83px instead of 100px as originally intended.

But let's say, I move back to fewer TD's (7), and I add in a wider width to each TD element (500px), the result is that the width of the td gets stuck at 119px.

http://jsfiddle.net/rqmNY/6/

And finally, let's say I have a table of 2000px width, and td of 100px width, and many td elements. http://jsfiddle.net/rqmNY/7/

Now the table width overrides the TD width, and expands the td's width to 222px.

Can anyone explain this behavior?

p.s. Note that in all cases, inspect element tool tells me that the width is always corresponding to the css, it's just the final result not showing correctly.

Answer 1

Have you tried adding display:inline-block to your TD CSS? That forces the browser to not ignore your TD width.