zoukankan      html  css  js  c++  java
  • div+css实现表头固定内容滚动表格

    <div class="m-demo">
        <table>
            <thead>
               <tr><th>定宽a</th><th>定宽b</th><th>定宽c</th><th>最后列不定宽d</th></tr>
            </thead>
        </table>
        <div class="scroll">
            <table>
                <tbody>
                    <tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
                    <tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
                    <tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
                    <tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
                    <tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
                    <tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    /* 预览辅助样式 */
    body{margin:20px;}
    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    /* 表头固定内容滚动的表格  */
    .m-demo{margin:0 0 20px;line-height:18px;}
    .m-demo .scroll{max-height:116px;border:1px solid #ddd;border-top:0;overflow-y:auto;}
    .m-demo table{100%;table-layout:fixed;}
    .m-demo th,.m-demo td{100px;padding:10px;border:1px solid #ddd;}
    .m-demo th{font-weight:bold;background:#eee;}
    .m-demo thead th:last-child,.m-demo tbody td:last-child{auto;}
    .m-demo tbody tr:nth-child(2n){background:#fafafa;}
    .m-demo tbody tr:first-child td{border-top:0;}
    .m-demo tbody tr:last-child td{border-bottom:0;}
    .m-demo tbody tr td:first-child{border-left:0;}
    .m-demo tbody tr td:last-child{border-right:0;}
  • 相关阅读:
    MVC Areas的使用
    每日踩坑 2019-07-30 H5 使用 iframe 底部有白边
    C# 使用 MsieJavaScriptEngine 引擎运行JavaScript
    Javascript获取value值的三种方法及注意点
    java编程(2)——servlet和Ajax异步请求的接口编程(有调用数据库的数据)
    java编程(1)——servlet和Ajax异步请求的接口编程(没有调用数据库的数据)
    eclipse的常用设置
    Junit4单元测试
    Java异常
    Java的抽象类和接口
  • 原文地址:https://www.cnblogs.com/GoCircle/p/8426369.html
Copyright © 2011-2022 走看看