table表头行固定

         大鱼吃小雨，快鱼吃慢雨，市场竞争无比激烈的今天，谁不以客户为导向，以客户为中心，时刻为客户提供优质的服务，必然被市场无情的淘汰。

        最近一个客户希望：一次性将所有的数据全部展示出来，不需要分页，且表头行固定。这种数据量不大，一次性全部展示具有直观、一目了然的作用，这种需求的确的很合理。故google一下，发现各位朋友的方法不计其数。归纳起来为以下几点：

1. 初始化表头：表头内容放入一个table中，计算表头各列好百分比；
2. 初始化正文DIV：正文DIV应用overflow-y: auto; overflow-x: hidden（显纵不显横），固定其高度 height: 350px（可以指定）；
3. 显示正文table放入正文DIV中，且将数据各列百分比和表头各列保持一致。

         如下所示：

  <div id="report">
        <table id="head" border="1" width="98%" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
            style="border-collapse: collapse; font-size: 12px; text-align: left; color: White;
            font-weight: bold; background-color: Green;">
            <tr>
                <td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
                    名称
                </td>
                <td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
                    性别
                </td>
                <td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
                    职务
                </td>
                <td style="width: 20%; height: 30px; color: Red; word-break: break-all;"&