I'm having some trouble with implementing a horizontal scroll feature and can't seem to make it work. If you want to take a look, here is the fiddle
Please provide me with assistance in identifying what mistakes I may be making
edit
Here is the code snippet
<table >
<tr>
<td style="width:300px;">
<div style="width:300px;overflow-x:scroll !important;">
<table style="width:100:float:left!important;"> <caption>2011</caption>
<td class="top">Brand</td>
<td class="top">Target</td>
<tr>
<td>ABC</td>
<td>22</td>
</tr>
</table>
<table style="width:100px;float:left!important;"> <caption>2012</caption>
<td>Brand</td>
<td>Target</td>
<tr>
<td>bnc</td>
<td>22</td>
</tr>
</table>
<table style="width:100px;float:left!important;"> <caption>2012</caption>
<td>Brand</td>
<td>Target</td>
<tr>
<td>bnc</td>
<td>22</td>
</tr>
</table>
<table style="width:100px;float:left!important;"> <caption>2012</caption>
<td>Brand</td>
<td>Target</td>
<tr>
<td>bnc</td>
<td>22</td>
</tr>
</table>
<table style="width:100px;float:left!important;"> <caption>2012</caption>
<td>Brand</td>
<td>Target</td>
<tr>
<td>bnc</td>
<td>22</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Check out these screenshots showing both the current state and the desired output