The following script positions the scroll bar on the far right of the screen. I wish it to be located directly right of the table.
Note that all style on this table is being added by JavaScript.
I thought I would just get the table width using var width=$('.body').width();
, and apply it to the enclosing <div>
using $('.container').width(width);
Problem is the scroll bar occupies space, and inappropriately compresses the table.
I can arbitrarily add some extra width, however, am concerned that it might be different for different browsers.
How would this best be accomplished? Thank you
<body>
<div id="myTable">
<table class="header"></table>
<div class="container" style="overflow-y:auto; height:40px;">
<table class="body">
<tbody>
<tr>
<td style="width:100px">ddd</td>
<td style="width:110px">ccc</td>
<td style="width:120px">42</td>
</tr>
<tr>
<td>ddd</td>
<td>ccc</td>
<td>42</td>
</tr>
<tr>
<td>ddd</td>
<td>ccc</td>
<td>42</td>
</tr>
</tbody>
</table>
</div>
<table class="footer"></table>
</div>
</body>