表头固定内容可滚动表格的3种实现方法

时间 2019-11-07

标签表头固定内容滚动表格实现方法繁體版

原文原文链接

有时候，咱们在开发前端页面过程当中，可能会用到这种表格：表头固定不动，表格内容（<tbody>）须要竖直滚动。前端

像这样的：ide

还有这样的：spa

经过研究，我大体总结了如下三种实现办法供你们参考，若是有错误之处敬请指正，也欢迎拍砖！！code

1、表格总宽度自动，每列宽度设置统一用 <colgroup>设置

这种实现方法最简单，只须要用两个表格，一个表格做为表头，另外一个表格用<div>包裹并设置该<div>的高度固定，高度溢出可滚动便可。两个表格的列宽用相同的<colgroup>固定列宽值，须要注意的是滚动条会占用必定的宽度，通常是：17px，因此在表头须要特别处理一下，否则表格就不能对齐了。你们看代码，最简单的办法是表头单独空一列和下面的表格滚动条对齐。blog

<div class="tableWrap" style="margin:20px;">
    <label>可滚动表格——表格宽度自动每列宽度设置<col></label>
    <table class="table-thead">
        <colgroup>
            <col width="50">
            <col width="100">
            <col width="150">
            <col width="17">
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th>帐户名称</th>
            <th>帐户编号</th>
            <th></th>
        </tr>
        </thead>
    </table>
    <div class="comTbody">
        <table class="table-tbody" style="border-top: 0;">
            <colgroup>
                <col width="50">
                <col width="100">
                <col width="150">
            </colgroup>
            <tbody>
            <tr>
                <td>1</td>
                <td>中国电信</td>
                <td>12312312313132</td>
            </tr>
            <tr>
                <td>1</td>
                <td>中国电信</td>
                <td>12312312313132</td>
            </tr>
            <tr>
                <td>1</td>
                <td>中国电信</td>
                <td>12312312313132</td>
            </tr>
            <tr>
                <td>1</td>
                <td>中国电信</td>
                <td>12312312313132</td>
            </tr>
            <tr>
                <td>1</td>
                <td>中国电信</td>
                <td>12312312313132</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

第一种方法是我本身为了快速实现采用的办法，事后我想起来常常看到的数据表格（dataGrid），也是表头固定，内容能够滚动，好比嘴上那两张图片分别是：kendo UI——grid、easyUI——dataGrid 。这样的表格看起来挺漂亮的，我研究了一下，发现它们两种有各自的实现方式。这两种表格在实际运用中由于绑定了不少JS事件，因此表格嵌套的层级不少，下面我为了更清晰的展现给你们，简化了嵌套。事件

2、表格宽度 100%，列宽度统一用<colgroup>设置————参考Kendo UI——grid

<label>可滚动表格——表格宽度100%，列宽度设置<col></label>
<div class="table-wrap">
    <div class="table-head">
        <div class="table-head-wrap">
            <table class="grid">
                <colgroup>
                    <col style="width:80px">
                    <col>
                    <col>
                    <col style="width:150px">
                </colgroup>
                <thead>
                <tr>
                    <th>
                        <span class="tab-link">序号</span>
                    </th>
                    <th>
                        <span class="tab-link">姓名</span>
                    </th>
                    <th>
                        <span class="tab-link">年龄</span>
                    </th>
                    <th>
                        <span class="tab-link">地址</span>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="table-content">
        <table class="grid">
            <colgroup>
                <col style="width:80px">
                <col>
                <col>
                <col style="width:150px">
            </colgroup>
            <tbody>
            <tr>
                <td>
                    <div>001</div>
                </td>
                <td>
                    <div>小明</div>
                </td>
                <td>
                    <div>23</div>
                </td>
                <td>
                    <div>上海</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>001</div>
                </td>
                <td>
                    <div>小明</div>
                </td>
                <td>
                    <div>23</div>
                </td>
                <td>
                    <div>上海</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>001</div>
                </td>
                <td>
                    <div>小明</div>
                </td>
                <td>
                    <div>23</div>
                </td>
                <td>
                    <div>上海</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>001</div>
                </td>
                <td>
                    <div>小明</div>
                </td>
                <td>
                    <div>23</div>
                </td>
                <td>
                    <div>上海</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>001</div>
                </td>
                <td>
                    <div>小明</div>
                </td>
                <td>
                    <div>23</div>
                </td>
                <td>
                    <div>上海</div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

View Code

这里表格添加了一个样式：table-layout: fixed; 列宽由表格宽度和列宽度设定。这种方法适用于，表格宽度固定。图片

3、表格宽度自动，列宽度精确固定设置 ————参考easyUI ——dataGrid

<div class="data-grid">
    <div class="data-view">
        <div class="grid-head">
            <div class="grid-head-inner">
                <table class="data-table">
                    <tbody>
                    <tr class="data-table-row">
                        <td>
                            <div class="datagrid-cell cell-c1">
                                <div>Item ID</div>
                            </div>
                        </td>
                        <td>
                            <div class="datagrid-cell cell-c2">
                                <div>Product</div>
                            </div>
                        </td>
                        <td>
                            <div class="datagrid-cell cell-c3">
                                <div>List Price</div>
                            </div>
                        </td>
                        <td>
                            <div class="datagrid-cell cell-c4">
                                <div>Unit Cost</div>
                            </div>
                        </td>
                        <td>
                            <div class="datagrid-cell cell-c5">
                                <div>Attribute</div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="grid-body">
            <table class="datagrid-btable">
                <tbody>
                <tr>
                    <td>
                        <div class="datagrid-cell cell-c1">
                            <span>EST-1</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c2">
                            <span>FI-SW-01</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c3">
                            <span>36.5</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c4">
                            <span>10</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c5">
                            <span>Large</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="datagrid-cell cell-c1">
                            <span>EST-1</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c2">
                            <span>FI-SW-01</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c3">
                            <span>36.5</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c4">
                            <span>10</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c5">
                            <span>Large</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="datagrid-cell cell-c1">
                            <span>EST-1</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c2">
                            <span>FI-SW-01</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c3">
                            <span>36.5</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c4">
                            <span>10</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c5">
                            <span>Large</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="datagrid-cell cell-c1">
                            <span>EST-1</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c2">
                            <span>FI-SW-01</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c3">
                            <span>36.5</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c4">
                            <span>10</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c5">
                            <span>Large</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="datagrid-cell cell-c1">
                            <span>EST-1</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c2">
                            <span>FI-SW-01</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c3">
                            <span>36.5</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c4">
                            <span>10</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c5">
                            <span>Large</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="datagrid-cell cell-c1">
                            <span>EST-1</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c2">
                            <span>FI-SW-01</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c3">
                            <span>36.5</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c4">
                            <span>10</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c5">
                            <span>Large</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="datagrid-cell cell-c1">
                            <span>EST-1</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c2">
                            <span>FI-SW-01</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c3">
                            <span>36.5</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c4">
                            <span>10</span>
                        </div>
                    </td>
                    <td>
                        <div class="datagrid-cell cell-c5">
                            <span>Large</span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

View Code

这种方法适用于每列宽度固定的表格。ip

这里是我写的源码：点我下载开发