Get real table width in safari when max-width is defined

Question

I am using bootstrap and it gives .table elements the following styles:

width:100%;
max-width:100%;

If I put that table into a container which is not wide enough to fit the table's contents, the table will ignore its max width and render wider than the container.

The problem is that safari does not report the width of that table correctly . It reports it as if it were 100% of the container.

Open this on chrome and then on safari: http://jsfiddle.net/6nfotj8j/2/

How can I get jquery to give me the correct width of the table without removing the max-width ?

(side note - this code will go into a jquery plugin, so id like to change/assume as little as possible about the underlying DOM)

edit
only affects safari version 7, works as expected in 5

Answer 1

Using the inspector in safari you can see its actually ~523px (borders added) and your fiddles prints ~522px which is fine (borders not calculated - change to outerWidth() to include borders + padding + margin).

In Chrome - script outputs ~516px and inspector ~518px, again that's correct (borders missing again).

The difference is between how the table renders in the two different browsers - fonts, line-breaks etc...

No problem here (tested also in FF, IE), you are getting the correct actual width of the table.