Placing a table inside a narrow div with overflow:auto. Across various browsers like Chrome, IE, and Firefox, the width exceeds 200 as expected. However, in Safari, the width is only 100.
Surprisingly, the jQuery width() documentation doesn't address this issue: https://api.jquery.com/width/
To see the problem in action, check out this demo on CodePen and open the console to view the logs: http://codepen.io/anon/pen/adZxrd
If the demo doesn't load properly, here are the code details provided below.
HTML:
<div class="outer">
<table class="table table-hover table-condensed">
<thead>
<tr>
<td>aaaaaaaaa</td>
<td>bbbbbbbbbbbbbb</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
CSS:
.outer {
width:100px;
overflow:auto;
}
.inner {
width:200px;
border:1px solid black;
}
JS:
$('.outer').scroll(function(){
console.log($('.table').width())
});