table头部、尾部固定;中间内容定高自适应滚动

很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现

工作过程中遇到了,作为一个小笔记,备忘!

如下图所示

---------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------

表格的头部,和尾部是固定不动的,中间内容随着内容的增多,而出现滚动条。

<!--container-->

<div class="container">
  <table class="form-table" cellpadding="0" cellspacing="0">

    <thead class="fixed-thead" id="head">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>

   <tbody class="scroll-tbody" id="body">
      <tr>
          <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
      </tr>

</tbody>

   <tfoot class="fixed-tfoot">
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年1龄</td>
        </tr>
   </tfoot>

</table>

</div>
<!--container-->

如上html结构简单。精简。

/*各个部分样式*/

@charset "utf-8";
body{
overflow: hidden;
}
.container {
border: 1px #ccc solid;
width: 90%;
margin: 100px auto;
}

.form-table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
text-align: center;
table-layout: fixed;
}

.form-table th {
border-left: none;
border-top: none;
border-right: 1px #ccc solid;
border-bottom: 1px #ccc solid;
background: #F3F3F3;
}

.form-table td {
border-left: none;
border-top: none;
border-bottom: 1px #ccc solid;
border-right: 1px #ccc solid;
}
.fixed-thead,
.fixed-tfoot {
display: block;
/*width: 99%;*/
width: -webkit-calc(100% - 17px);
width: -moz-calc()(100% - 17px);
width: calc(100% - 17px);
height: 50px;
}
.fixed-tfoot tr td {
background: #F3F3F3;
border-bottom: none;
}
.fixed-thead tr,
.fixed-tfoot tr {
width: 100%;
height: 50px;
line-height: 50px;
display: block;
}

.fixed-thead tr th,
.fixed-tfoot tr td {
float: left;
display: block;
width: 25%;
height: 50px;
font-size: 16px;
text-align: center;
}

.scroll-tbody {
display: block;
height: 306px;
overflow: auto;
width: 100%;
}

.scroll-tbody tr {
width: 100%;
display: block;
height: 40px;
line-height: 40px;
}

.scroll-tbody tr td {
float: left;
display: block;
width: 25%;
}

.form-table .scroll-tbody tr:nth-child(odd) td {
background-color: #ECE9D8;
}

-------------------核心对齐样式---------------------

width: -webkit-calc(100% - 17px);
width: -moz-calc()(100% - 17px);
width: calc(100% - 17px);

兼容高级浏览器

-----------------------------------------------------

为了兼容IE6,可以使用如下 js去实现

<script type="text/javascript">
window.onload=window.onresize=function (){
var body=document.getElementById("body");
var head=document.getElementById("head");
head.style.width=(body.scrollWidth)+"px";
}
</script>

----------------------------------------------------

table头部、尾部固定;中间内容定高自适应滚动的更多相关文章

  1. layui table 数据表格固定列的行高和table其他列的行高不一致

    1.问题描述:使用layui的table数据表格,固定某一列,这样表格中数据的宽度超出屏幕宽度时,固定列可以一直显示在屏幕中,不会随着底部滚动栏左右的拖动而变化位置.但是遇到一个问题,就是固定列的行高 ...

  2. flex盒模型实现头部尾部固定

    近期做移动app.wap等站,需要头部固定在顶部,不随着内容滚动而滚动平时第一想法就是使用position:fixed;top:0;z-index:10;这样去实现但这样使用fixed之后,会在ios ...

  3. table 与 div 固定宽高问题

    div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...

  4. table表格宽度固定,同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  5. html Table实现表头固定

    最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...

  6. LODOP打印table表格宽度固定-超宽隐藏

    之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...

  7. table表格某一td内容太多导致样式混乱的解决方案

    对于有很多条目的数据,通常采用table元素来快速实现,某一个td的内容太多的话就会导致样式混乱难看. 解决方案 要让table的宽度固定可以给table元素设置table-layout:fixed; ...

  8. margin+absolute布局:右栏固定主内容自适应 demo

    margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300p ...

  9. bootstrap table实现iview固定列的效果

    因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. 搞一个app需要多久?

    //转载文章,看后有感 我有些尴尬地拿着水杯,正对面坐着来访的王总,他是在别处打拼的人,这几年据说收获颇丰,见移动互联网如火如荼,自然也想着要进来干一场,尽管王总从事的行当也算跟IT沾边,但毕竟太长时 ...

  2. SpringMVC4+thymeleaf3的一个简单实例(篇三:页面参数获取)

    本篇将通过示例介绍页面参数是如何传递到后台的.我们继续沿用之前搭好的程序结构,如果你不知道,请参照前两篇.为方便跳转页面,我们在首页以及zoolist.html页面都加上彼此地址的链接:首页: zoo ...

  3. thinksns消息提示的实现机制(转)

    转自:http://jingyan.baidu.com/article/f25ef2541718eb482c1b8215.html thinksns的消息提示不是实时的,而是1分钟向服务器请求一次,再 ...

  4. phpcms V9 内容模型管理(转)

    转自:http://www.cnblogs.com/Braveliu/p/5102627.html [1]理解模型 模型,系统知识的抽象表示.既然抽象了,那就得脑补一下.大家都是面向对象设计的专业人员 ...

  5. Apache配置完虚拟主机后,使用Chrome访问localhost还是默认目录htdocs

    Chrome 解析DNS出错,这个错误比较罕见,甚至说有点奇特.今天在使用Apache配置虚拟主机时,出现了一个非常奇怪的现象.我按照配置的步骤配置虚拟主机,如下 配置虚拟主机的步骤如下: 1. 启用 ...

  6. javascript为目标位置div等设置高度

    应该是DOM的东西: document.getElementById("目标id").style.height = 多高(数值)+"px";

  7. magento站点还原到本地

    问题描述 首先将网站文件夹解压到xampp/htdocs/wenjianjia目录下,然后替换sql文件里的域名为localhost/wenjianjia.然后访问前台,正常.访问后台,出问题了 Ma ...

  8. php生成缩略图

    <?php /** * 生成缩略图函数(支持图片格式:gif.jpeg.png和bmp) * @author ruxing.li * @param string $src 源图片路径 * @pa ...

  9. MBR

    Mbr位于磁盘的0柱面,0磁头,1扇区. MBR       有三部分构成,主引导程序,硬盘分区表DPT和,硬盘的有效标志55AA.在512个字节的主引导扇区里. 主引导程序占446个字节,dpt占6 ...

  10. 运行在TQ2440开发板上以及X86平台上的linux内核编译

    一.运行在TQ2440开发板上的linux内核编译 1.获取源码并解压 直接使用天嵌移植好的“linux-2.6.30.4_20100531.tar.bz2”源码包. 解压(天嵌默认解压到/opt/E ...