thead固定tbody滚动

table tbody {
        display:block;
        height:195px;
        overflow-y:scroll;
    }
    table thead, tbody tr {
        display:table;
        width:100%;
        table-layout:fixed;
    }
    table thead {
        width: calc( 100% - 1em )
    }

时间： 2024-04-27 02:17:03

thead固定tbody滚动的相关文章

纯CSS,table的thead固定,tbody显示滚动条

首先是html的table的代码: 1 <table class="tablediv" id="myTable" border="1"> 2 <thead> 3 <tr> 4 <td class="wt40">111asdasdassd</td> 5 <td class="wt50">222asdsa</td> 6 <

table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格table固定thead表头</title> 6 <style type="text/css"> 7 8 tab

设置GridView、DataGrid 以提供thead、tbody等标签

一.简述做项目用到了GridView.DataGrid(原谅公司,既然还用DataGrid => 又从以前的项目中搬代码 - - !!! ).然后想为其增加 thead.tbody 好兼容JQuery的js插件. 二.内容 GridView代码 GridView1.DataSource = fakeDataTable; GridView1.DataBind(); GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; Da

table标签中thead、tbody、tfoot的作用

为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成.下载一块显示一块,表格巨大时有比较好的效果. tbody.tfoot.thead一般来说用得不是很多,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头.正文和脚注.而这三部分分别用: thead, tbody, t

css设置背景固定不滚动效果的示例

css设置背景固定不滚动效果的示例背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背景不滚动的效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

table中thead保持不动，tbody滚动(2)

如果table中的th和td都没有合并列,可以不设th和td宽度 #tblDataList{ height:600px;}#tblDataList thead { display:block;} #tblDataList tbody { display:block; height:600px; overflow-y:scroll;} #tblDataList thead tr { display:table; width:100%; table-layout:fixed;}#tblDataLis

table中thead保持不动，tbody滚动(3)

如果thead中需要合并列 #tblDataList thead {display:block;} #tblDataList tbody { display:block;height:600px; overflow-y:scroll;overflow-x: hidden;} #tblDataList thead tr { display:table; width:100%; table-layout:fixed;}#tblDataList tbody tr {display:table; wid

table固定表头滚动

table固定表头使用scrollTop监听滚动如下例 1.html <div class="tabflow" id="flowtable-cont"> <table> <thead><tr><th>年度</th><th>起降架次(万架)</th><th>旅客吞吐(万人)</th><th>货邮吞吐(万吨)</th>&

thead tfoot tbody标签的使用

这三个都是<body>元素的子标签,不常用,因为其只是对<tr>标签做了一个区分 <thread>用于包裹表格头信息 <tfoot>用于包裹表格最后一行,不管将 tfoot 元素放在表格的什么位置,最后都会显示在最后一行 <tbody>用于包裹表格内容信息使用举例 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charse