• 首页
  • 教育

    • 【html滚动段落】HTML table固定标头tbody滚动条

    2023-02-27 00:57 29次浏览 教育

    纯CSS表thead固定tbody滚动效果

    由于项目要求，表中数据量增加时会出现滚动条，滚动过程中，默认情况下，表头会随着表内容滚动，因此看不到头上的字段名，影响体验效果！

    实现的想法：

    向tbody标签添加overflow-y: auto样式，向tr标签添加table-layout:fixed，以滚动内容；(核心)样式，如果tbody有滚动条，滚动条也会占位，tbody和thead不会对齐，所以设置tbody的宽度时滚动条的宽度也是【如果不想显示滚动条，请将滚动条的宽度设置为0px，滚动条就会消失。

    下面是渲染。具体的完整实例代码也在下面。

    完整实例代码：

    ！DOCTYPE html

    Html lang='en '

    头(电影)

    meta charset=' utf-8 '

    元名称=' viewport ' content=' width=device-width，initial-scale=1.0 '

    meta http-equiv=' x-ua-compatible ' content=' ie=edge '

    标题纯CSS表thead固定tbody滚动/标题

    风格(音乐)

    .table-box {

    Margin: 100px auto:

    Width: 1024px

    }

    /*滚动条宽度*/

    :3360-web kit-scoloba {

    Width: 8px

    background-color : transparent；

    }

    /*滚动条颜色*/

    :3360-网络套件-sculba-拇指{

    background-color : # 27314d；

    }

    Table {

    width : 100%；

    border-spacing : 0 px；

    border-collapse : collapse；

    }

    Table caption{

    Font-weight:粗体；

    font-size : 24px；

    line-height : 50 px；

    }

    表th，表TD {

    海特： 50px

    文本-align :中心：

    Border: 1px solid gray

    }

    Table thead {

    Color: white

    background-color : # 38F；

    }

    Table tbody {

    Display: block

    Width: calc(100% 8px) : /*其中8px是滚动条的宽度*/

    海特： 300px

    溢出-y :自动；

    -WebKit-overflow-scrolling : touch；

    }

    Table tfoot {

    background-color : # 71 ea 71；

    }

    Table thead tr、table tbody tr、table tfoot tr {

    框-sizing : border-框；

    table-layout : fixed；

    Display: table

    width : 100%；

    }

    table tbody tr : nth-of-type(odd){

    Background: # EEE

    }

    table tbody tr:nth-of-type(even) {
    background: #FFF;
    }

    table tbody tr td{
    border-bottom: none;
    }

    </style>
    </head>

    <body>
    <section class="table-box">
    <table cellpadding="0" cellspacing="0">
    <caption>纯CSS table表格 thead固定 tbody滚动</caption>

    <thead>
    <tr>
    <th>序 号</th>
    <th>姓 名</th>
    <th>年 龄</th>
    <th>性 别</th>
    <th>手 机</th>
    </tr>
    </thead>

    <tbody>
    <tr>
    <td>001</td>
    <td>Name</td>
    <td>28</td>
    <td>女</td>
    <td>Mobile</td>
    </tr>
    <tr>
    <td>002</td>
    <td>Name</td>
    <td>28</td>
    <td>男</td>
    <td>Mobile</td>
    </tr>
    <tr>
    <td>003</td>
    <td>Name</td>
    <td>28</td>
    <td>女</td>
    <td>Mobile</td>
    </tr>
    <tr>
    <td>004</td>
    <td>Name</td>
    <td>28</td>
    <td>男</td>
    <td>Mobile</td>
    </tr>
    <tr>
    <td>005</td>
    <td>Name</td>
    <td>28</td>
    <td>女</td>
    <td>Mobile</td>
    </tr>
    <tr>
    <td>006</td>
    <td>Name</td>
    <td>28</td>
    <td>男</td>
    <td>Mobile</td>
    </tr>
    <tr>
    <td>007</td>
    <td>Name</td>
    <td>28</td>
    <td>女</td>
    <td>Mobile</td>
    </tr>
    <tr>
    <td>008</td>
    <td>Name</td>
    <td>28</td>
    <td>男</td>
    <td>Mobile</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
    <td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
    </tr>
    </tfoot>
    </table>
    </section>
    </body>

    </html>

    我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

    原文链接：

    1.文章《【html滚动段落】HTML table固定标头tbody滚动条》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

    2.文章《【html滚动段落】HTML table固定标头tbody滚动条》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

    相关推荐

    ↑