HTML表格冻结列打破布局

Question

我一直在努力让以下链接中的布局正常工作：     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>

Answer 1

问题出在这一行

#header_detail {
    text-align: left;
    position:absolute;  // This line   
    left : 0;    
}

如果你拿出位置：绝对;你会得到你所在地区的所有城市。

JsFiddle

Answer 2

div.dashboardBoxBody {
 padding: 8px;
 height: 200px;
 overflow: auto;
 // margin-left : 5em;    
}

#header_detail {
  text-align: left;
  // position:absolute;   
  left : 0;    
}

您需要删除div的左边距绝对位置 AND 以获得相同的结果而不会溢出。