jshtml固定表头


<html xmlns="http://www.w3.org/1999/xhtml">
 
    <head>
        <meta charset="utf-8" />
        <title>表格头部固定</title>
        <style type="text/css">
            /*
            .table-head table,.table-body table{width:100%;border-collapse:collapse;}
            .table-head{padding-right:17px;background-color:#999;color:#000;}
            .table-body{width:100%; height:300px;overflow-y:auto;}
            .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
            
            .table-body table tr td{
                border:1px solid red;
                text-align: center;
            }
            
*/
            
               .table-head table,.table-body table{width:1190px;border-collapse:collapse; }
           
            .table-body{width:1200px; height:300px;overflow-y:auto;}
            
            .table-body table tr td{
               
                text-align: center;
            }
            
        </style>
    </head>

    <body>
        <div style="width:100%;">
            <div class="table-head">
                <table>
                    <colgroup><col span="2" style="width: 100px;" /><col /></colgroup>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>内容</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="table-body">
                <table>
                    <colgroup><col span="2" style="width: 100px;" /><col /></colgroup>
                    <tbody>
                        <tr><td>1</td><td>我只是用来测试的</td></tr>
                        <tr><td>2</td><td>我只是用来测试的</td></tr>
                        <tr><td>3</td><td>我只是用来测试的</td></tr>
                        <tr><td>4</td><td>我只是用来测试的</td></tr>
                        <tr><td>5</td><td>我只是用来测试的</td></tr>
                        <tr><td>6</td><td>我只是用来测试的</td></tr>
                        <tr><td>7</td><td>我只是用来测试的</td></tr>
                        <tr><td>8</td><td>我只是用来测试的</td></tr>
                        <tr><td>9</td><td>我只是用来测试的</td></tr>
                        <tr><td>10</td><td>我只是用来测试的</td></tr>
                        <tr><td>11</td><td>我只是用来测试的</td></tr>
                        <tr><td>12</td><td>我只是用来测试的</td></tr>
                        <tr><td>13</td><td>我只是用来测试的</td></tr>
                        <tr><td>14</td><td>我只是用来测试的</td></tr>
                        <tr><td>15</td><td>我只是用来测试的</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

posted on 2020-11-17 16:49 青蛙學堂 阅读(5) 评论(0)  编辑 收藏 引用 所属分类: HTMLCSSJavaScript

只有注册用户登录后才能发表评论。
<2020年12月>
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

导航

统计

常用链接

留言簿(7)

随笔分类

随笔档案

收藏夹

青蛙学堂

最新评论

阅读排行榜

评论排行榜

60天内阅读排行