使用html中的table实现内容滚动下拉表头固定不动的方法

朱雀 2022-09-03 10:17 11阅读 0赞

### 使用html中的table实现内容滚动下拉表头固定不动的方法 ###

*   *  实现效果图
     *  html代码和css样式
     *  关键之处

## 实现效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]

## html代码和css样式 ##

<style> .table-head { padding-right: 17px; background-color: rgba(153, 153, 153, 1); color: rgba(0, 0, 0, 1) } .table-body { width: 100%; height: 300px; overflow-y: scroll } .table-head table, .table-body table { width: 100% } .table-body table tr:nth-child(2n+1) { background-color: rgba(242, 242, 242, 1) } .table-body table tr:hover { backgroud-color: #ddd !important } </style>
    
    
      <div style="width: 800px;">
        <div class="table-head">
        <table>
            <colgroup>
                <col style="width: 80px;" />
                <col />
            </colgroup>
            <thead>
                <tr><th>序号</th><th>内容</th></tr>
            </thead>
        </table>
        </div>
        <div class="table-body">
        <table>
            <colgroup><col style="width: 80px;" /><col /></colgroup>
            <tbody>
    			<tr><td>1</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>2</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>3</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>4</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>5</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>6</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>7</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>8</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>9</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>10</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>11</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>12</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>13</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>14</td><td>我是www.qipa250.com奇葩天地网</td></tr>
                <tr><td>15</td><td>我是www.qipa250.com奇葩天地网</td></tr>
            </tbody>
        </table>
        </div>
    </div>

## 关键之处 ##

1、使用了colgroup标签，来对上下两个表格的列宽进行了定义，让他们保持一致。

2、上边的div .table-head添加了样式padding-right:17px，这个宽度是为了保证跟下边的div .table-body的滚动条保持一致，同时下边的表格.table-body添加了样式overflow-y:scroll;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20220829/d1890747889e403190ef1c41243adb84.png

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 html table 固定表头和列

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

分手后的思念是犯贱/ 2024年04月17日 05:34/ 0 赞/ 67 阅读

相关 table表头固定只让内容滚动

table表头固定只让内容滚动纯css实现表头固定，只tbody滚动需要用到粘性固定属性 – position:sticky position:sticky

曾经终败给现在/ 2024年03月26日 16:51/ 0 赞/ 82 阅读

相关 table表头固定并添加滚动条

实现表头锁定的方式很多，这里这种方式是比较简单，并且是没有任何问题的；完整代码示例： <!DOCTYPE html>

古城微笑少年丶/ 2024年02月19日 17:01/ 0 赞/ 46 阅读

相关如何实现table行列表头不滚动

实现table行和列表头固定不滚动，太简单了解决方法： var \_this=this $(".count-list").scroll(function()

秒速五厘米/ 2022年12月06日 15:54/ 0 赞/ 567 阅读

相关使用bootstrap框架实现内容滚动条滚动显示表格table固定表头

使用bootstrap框架实现内容滚动条滚动显示表格table固定表头实现效果 html代码实现效果 ![在这里插入图片描述][wa

àì夳堔傛蜴生んèń/ 2022年09月03日 10:19/ 0 赞/ 1116 阅读

相关使用html中的table实现内容滚动下拉表头固定不动的方法

使用html中的table实现内容滚动下拉表头固定不动的方法实现效果图 html代码和css样式关键之处实现效果图

朱雀/ 2022年09月03日 10:17/ 0 赞/ 12 阅读

相关 css 表头不滚动,css固定表头不随滚动条移动.doc

先说效果描述如图：涉及到数据保密的缘故所以数据弄掉了。效果为：整个grid数据会出现横向，竖向滚动条。其中所有的表头：操作，序号，测试1.。。。等等要素，不会随着竖向滚动条的滚

深藏阁楼爱情的钟/ 2022年09月02日 15:40/ 0 赞/ 255 阅读

相关 bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机网站，今天又拿出来弄一弄因为主要是给手机访问，用的是bootstrap响应式布局，今天的任务是做一个数据展示页面但是由于数据的列比较多，所以

骑猪看日落/ 2022年08月13日 14:47/ 0 赞/ 209 阅读

相关 table表头固定，内容可滚动问题

1.首先新建html页面body中写入： <div class="title_div" id="tdiv"> <table class="tit

偏执的太偏执、/ 2022年06月02日 01:12/ 0 赞/ 237 阅读

相关 HTML 页面滚动时，部分内容位置固定不滚动

HTML 页面滚动时，部分内容位置固定不滚动效果截图： ![在这里插入图片描述][20190405174458892.gif] 页面源代码： <!DOC

妖狐艹你老母/ 2022年02月23日 01:00/ 0 赞/ 386 阅读