I'm struggling to make the layout of the following link work properly: http://jsfiddle.net/Tc5Xk/
Could someone offer assistance with this?
div.dashboardBox {
border: 1px solid #999999;
width: 45%;
margin-right: 20px;
margin-bottom: 20px;
float: left;
}
div.dashboardBoxBody {
padding: 8px;
height: 200px;
overflow: auto;
margin-left : 5em;
}
table.standardTable {
position: static;
width: 95%;
}
.standardTable th {
font-size: 11px;
background-color: #888888;
color: #FFFFFF;
font-weight: bold;
text-align: left;
border: 1px solid #AAAAAA;
}
#header_detail {
text-align: left;
position:absolute;
left : 0;
}
<div class="dashboardBox">
<div class="dashboardBoxBody">
<table style="width:200%" class="standardTable">
<tr>
<th id="header_detail">Location</th>
<th id="header">Jan-13</th>
<th id="header">Feb-13</th>
<th id="header">Mar-13</th>
<th id="header">Apr-13</th>
<th id="header">May-13</th>
<th id="header">Jun-13</th>
<th id="header">Jul-13</th>
<th id="header">Aug-13</th>
<th id="header">Sep-13</th>
<th id="header">Oct-13</th>
<th id="header">Nov-13</th>
<th id="header">Dec-13</th>
</tr>
... Additional content truncated for brevity ...
</tr>
</table>
</div>