jQuery仿excel表格头部固定内容滚动展示特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 43 15



特效描述:仿excel表格 头部固定 内容滚动展示。jQuery可滚动表格——表格宽度100%,列宽度设置,css table表格头部固定滚动

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/test.css">

2. HTML代码

<div cla
ss="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>
<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>
<label>可滚动表格——表格宽度自动,列宽度固定设置<col></label>
<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到