我一直在尝试使以下链接中的布局正常工作:http: //jsfiddle.net/Tc5Xk/
有人可以帮忙吗?
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>
<tr>
<td id="header_detail">Australia</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">California</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Hyderabad</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Los Angeles</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Colorado</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Denver</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Nevada</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Stockholm</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Switzerland</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Brussels</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Paris</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Calicut</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Leh</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Denmark</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Constaninople</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Istanbul</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
<tr>
<td id="header_detail">Las Vegas</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
<td id="detail">80.5%</td>
</tr>
</table>
</div>