表格第一行固定，下面

最新推荐文章于 2024-07-31 02:32:41 发布

ImpulsionAndpower

最新推荐文章于 2024-07-31 02:32:41 发布

阅读量2.5k

点赞数

分类专栏： HTML5

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下面写一个很简单的例子：

布局：

<div>
    <table id="tableHeader" class="table table-hover table-bordered table-striped" >
        <thead>
            <tr>
                <th style="width:70%">{{'HEADER_TABLE_NAME' | translate}}                                                
                    <img src="resources/images/sortIcon/sort_both.png" ng-click="sort=true;predicate ='displayName';reverse=true;" ng-show="!sort"/>
                    <img src="resources/images/sortIcon/sort_asc.png" ng-click="predicate ='displayName';reverse=true" ng-show="sort&&!reverse"/>
                    <img src="resources/images/sortIcon/sort_desc.png" ng-click="predicate ='displayName';reverse=false" ng-show="sort&&reverse"/>
                </th>
                <th style="width:30%">{{'HEADER_VERSION' | translate}}</th>
            </tr>
        </thead>
    </table>
</div>
<div style="overflow-y:visible; overflow-x:hidden">
    <table ng-resize class="table table-hover table-bordered table-striped" style="width:100%">
        <tbody>
            <tr ng-repeat="table in tables | searchFilter:searchText | orderBy:predicate:reverse" draggable="true" ng-drag drag-data="selectedVersion">
                <td style="width:70%" ng-click="tableVersionChangedHandler(selectedVersion)">{{table.displayName}}</td>
                <td style="width:30%;height:24px">
                    <select ng-show="table.versions" ng-init="selectedVersion = table.versions[0]" ng-change="tableVersionChangedHandler(selectedVersion)" ng-model="selectedVersion" ng-options="item.version for item in table.versions">
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</div>

样式：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Table</title>
    <style type="text/css">
        .table{
            width: 100%;
            border-collapse:collapse; 
            border-spacing:0; 
        }
        .fixedThead{
            display: block;
            width: 100%;
        }
        .scrollTbody{
            display: block;
            height: 262px;
            overflow: auto;
            width: 100%;
        }
        .table td,.table th {
            width: 200px;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            padding: 2px 3px 3px 4px
        }
        .table tr{
            border-left: 1px solid #EB8;
            border-bottom: 1px solid #B74;
        }
        thead.fixedThead tr th:last-child {
            color:#FF0000;
            width: 218px;
        }
    </style>
</head>
<body >
    <table class="table">
        <thead class="fixedThead">
            <tr><th>header</th><th>header two</th></tr>
        </thead>
        <tbody class="scrollTbody">
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
        </tbody>
    </table>
</body>
</html>