首页 > 其他分享 >css控制table首列固定内容滚动

css控制table首列固定内容滚动

时间:2023-10-30 12:22:19浏览次数:34  
标签:11 tbody width 首列 table css thead

        table tbody {
            display: block;
            height: 500px;
            overflow-y: scroll;
        }

        table thead, tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            box-sizing: border-box;
        }


        table thead {
            width: calc( 100% - 17px );
            background-color: #ddd;
        }

 

<table id="tblist" class="layui-table" border="1" cellpadding="1" cellspacing="0">
                        <colgroup>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>模块</th>
                                <th>子模块</th>
                                <th>权限</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>贤心</td>
                                <td>2016-11-29</td>
                                <td>人生就像是一场修行</td>
                            </tr>
                            <tr>
                                <td>许闲心</td>
                                <td>2016-11-28</td>
                                <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
                            </tr>
                        </tbody>
                    </table>

 

标签:11,tbody,width,首列,table,css,thead
From: https://www.cnblogs.com/zyx321/p/17797519.html

相关文章

  • Tableau-桑基图
    桑基图.xlsx1.基本函数1.index()2.running_sum(),running_avg()取running_avg举例running_sum:返回从第一行累计的相加到当前行的值3.total()函数公式为TOTAL(expression),表示返回给定表达式(expression)的总计。例如,TOTAL(SUM([营销额])),用于计算各自分区中全部行的SU......
  • 利用CSS 实现环形百分比进度展示
    先看效果图: UI设计了这样的效果,已读人数占总人数的百分比,环形展示。这里可以用echarts图表,也可以用css实现,因为我是在小程序环境下,考虑到包大小体积,采用了css实现。核心就是一行代码:background-image:conic-gradient(#e9e9e930deg,transparent30deg);这个只是一个静......
  • SCSS的嵌套规则可以减少重复代码,那么如何在嵌套规则中使用父选择器?
    在SCSS中,使用&符号来引用父选择器,在嵌套规则中使用父选择器。这样可以避免重复编写选择器,并且在生成的CSS中保持正确的层级关系。以下是一个示例,展示了如何在嵌套规则中使用父选择器:.button{background-color:blue;&:hover{background-color:darkblue;}&.ac......
  • iptables 使用总结
       Linux系统的防火墙功能是由内核实现的2.0版内核中,包过滤机制是ipfw,管理工具是ipfwadm2.2版内核中,包过滤机制是ipchain,管理工具是ipchains2.4版及以后的内核中,包过滤机制是netfilter,管理工具是iptablesiptables用户态位于/......
  • css 多列布局
    1.1多列布局这里感谢小甲鱼,毕竟编程是小甲鱼带入坑了鱼C-Web-CSS-速查1.1.1column-count定义:column-count属性指定某个元素应分为的列数。column-count:number|auto;值说明number列的最佳数目将其中的元素的内容无法流出auto列数将取决于其他属性。......
  • CSS 动画
    1.1过渡transitiontransition:background-size2scubic-bezier(0,.98,.33,1.1);steps()函数可以配合使用steps(5,end)1.2变形transform1.2.1旋转rotate()函数可以配合使用transition:2s;transform:rotate(-180deg);向左旋转,2s旋转1180deg(度)transit......
  • 无涯教程-Clojure - Immutable Nature函数
    默认情况下,结构也是不可变的,因此,如果我们尝试更改特定键的值,则它不会更改。Immutable-示例(nsclojure.examples.example(:gen-class))(defnExample[](defstructEmployee:EmployeeName:Employeeid)(defemp(struct-mapEmployee:EmployeeName"Learnfk"......
  • 【转】CSS重置文档/reset.css
    前言reset.css文档就是一个普通的层叠样式表文档,就是css文档,一个网站一般会用三种css文档来设定网站的样式。重置样式(reset.css)(重置默认的css样式);公共样式 (common.css)(一系列页面共用共享的样式,如:头部底部样式);独立样式(每个页面单独使用的样式,如index.css)。在这里具体讲......
  • css图片宽高不同,缩放图片,保持宽高,注意最外层的盒子要用display:inline-flex
    <divclass="product"><Popoverplacement="right"><template#content><divclass="w-[200px]h-[200px]"><img:src=&......
  • 用html 加css 绘制表格
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>/*头部样式定义*/.header{padding-bottom:10px;/*设置头部的下内边距*/......