table-首列冻结

首先，table外层套两层div，outerDiv和 innerDiv

<div class="outerDiv">
        <div class="innerDiv">
            <table border="0" class="table">
                <thead class="thead">
                    <tr>
                        <th class="wd200">名称</th>
                        <th class="wd150">性别</th>
                        <th class="wd150">班级</th>
                        <th class="wd150">语文</th>
                        <th class="wd150">数学</th>
                        <th class="wd120">合计</th>
                    </tr>
                </thead>
                <tbody class="tbody_f">
                    <tr>
                        <td class="">张三</td>
                        <td class="">男</td>
                        <td class="">2</td>
                        <td class="">80</td>
                        <td class="">90</td>
                        <td class="">170</td>
                    </tr>
                    <tr>
                        <td class="">李四</td>
                        <td class="">男</td>
                        <td class="">2</td>
                        <td class="">80</td>
                        <td class="">90</td>
                        <td class="">170</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

outerDiv和innerDiv的样式设置如下：

.outerDiv{
	position: relative; 
	overflow: hidden;
}
.innerDiv{
	overflow: auto; 
	padding-left: 230px; // padding-left是固定列的宽度
} 

设置table的样式：

注： 第一列position设为absolute

.table{font-size: 12px;  width: 100%;border-spacing:0px; table-layout: fixed;border-bottom:0px; padding: 0px; margin:0px;border-collapse:collapse;font-weight: bold;}
.thead {border-spacing: 0px; }
.thead tr{ height: 38px; line-height: 38px;font-size: 14px;}
.tbody{text-align: center; font-weight: bold; clear: both;border-spacing: 0px;}
.tbody tr td{font-size: 14px;font-weight: bold;padding: 20px 0px; min-height: 30px;vertical-align: top;}
.tbody tr td:nth-child(1),.thead_f th:nth-child(1){text-align: left;padding-left: 30px;}
.table th:first-child, .table td:first-child{position: absolute;left: 0px; width: 200px; border-right: 1px solid #DFE2E6;}

ps： 重要的一点，为了保证固定列高度和其他高度保持一致，需要遍历没一行，判断高度，并设置

$('.table td:first-child').each(function(){
    var td_height = $(this).outerHeight();
    var tr_height = $(this).parent().outerHeight();
    if (td_height > tr_height) {
      $(this).parent().height(td_height);
    } else if (td_height < tr_height) {
      $(this).outerHeight(tr_height);
    }
});

最终效果如下：