固定表头与表格内容对齐 表格内容滚动

原创 2015年11月21日 09:50:14
<div class="table">
   <div class="table-head">
   <table>
       <colgroup>
           <col style="width: 80px;" /><col />
       </colgroup>
       <thead>
          <tr style="height: 45px;">
          <th>序号</th>
          <th>我只是用来测试的</th>
          <th>我只是用来测试的</th>
          <th>我只是用来测试的</th>
          <th>我来测试的</th>
          <th>我来测试的</th>
          </tr>
       </thead>
   </table>
   </div>
   <div class="table-body">
   <table>
       <colgroup><col style="width: 80px;" /><col /></colgroup>
       <tbody>
           <tr>
            <td>1</td>
            <td>我只是用来测试的</td>
            <td>我来测试的</td>
          <td>我来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>2</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>3</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>4</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>5</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>6</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>7</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>8</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>9</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>10</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>11</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>12</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>13</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
          <td>14</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          </tr>
           <tr>
            <td>15</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
           </tr>
       </tbody>
   </table>
   </div>
</div>
<!-- 1、使用了colgroup标签,来对上下两个表格的列宽进行了定义,让他们保持一致。
2、上边的div .table-head添加了样式 padding-right : 17px ,这个宽度是为了保证跟下边的div .table-body的滚动条保持一致,同时下边的表格.table-body添加了样式 overflow-y : scroll ; -->

表头固定内容可滚动表格的3种实现方法

有时候,我们在开发前端页面过程中,可能会用到这种表格:表头固定不动,表格内容()需要竖直滚动。 像这样的: 还有这样的: 通过研究,我大致总结了以下三种实现办法供大家参考,如果有错误之处敬请指正...
  • dragonpeng2008
  • dragonpeng2008
  • 2017年11月14日 10:43
  • 206

实现table表头固定 内容滚动效果

html>      head>      style type="text/css">          /*所有内容都在这个DIV内*/          div.all {           ...
  • gwpJava
  • gwpJava
  • 2013年11月21日 15:25
  • 5528

实现双向固定表头的表格

实现目标 包含横向表头和纵向表头的表格 在横向滚动轴滚动时,横向表头随之滚动,纵向表头固定不变 在纵向滚动轴滚动时,纵向表头随之滚动,横向表头固定不变 效果图 使用资源 angularjs jquer...
  • lm278858445
  • lm278858445
  • 2016年11月28日 15:57
  • 961

表格表头固定,内容多时滚动内容

不多写废话了,都在代码注释中 * { margin: 0; padding: 0; } /*所有内容都在这个DIV内*/ ...
  • redstarofsleep
  • redstarofsleep
  • 2015年04月17日 09:00
  • 594

Jquery Datatables表头不对齐解决办法

我们用Datatables经常会遇到这种情况,就是浏览器或者HTML里元素改变大小或分辨率后,标题就会出现不对齐现象。...
  • BugsCode
  • BugsCode
  • 2016年12月02日 10:23
  • 6702

滚动条下拉时 table 的thead 固定在网页固定在顶部不动

一、效果图 二、前端页面 场地预定 .table-chang{margin-left: 0px
  • jxq0816
  • jxq0816
  • 2016年06月17日 18:45
  • 9015

固定表头可以纵向滚动的html表格

设计思路: 将表格的表头与内容分别放到两个标签里,然后将其放在一个里以使表头和表格的总宽度一致,将表格内容放到一个可滚动的div()里,为每个单元格添加类来固定宽度以实现表头与内容的单元格宽度一...
  • Jjwxyz
  • Jjwxyz
  • 2016年01月27日 15:42
  • 1678

Table的思索(二):表头固定而内容滚动的表格

产品要求表格的表头固定,而内容在超出table的高度后,还能自由滚动,难度较高,本文尝试了几种常用方法,但都经历了失败,最后给出了一种可行的解决方案。...
  • yiifaa
  • yiifaa
  • 2016年08月03日 16:14
  • 6034

bootstrap-table 表头和内容对不齐解决办法

bootstrap-table 表头和内容对不齐解决办法
  • u011271894
  • u011271894
  • 2017年07月27日 11:39
  • 1148

js 实现 table 固定表头

固定表头           #box{           height:214px;           width:500px;           overflow-y:aut...
  • zhu_nana
  • zhu_nana
  • 2016年02月15日 15:07
  • 4250
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:固定表头与表格内容对齐 表格内容滚动
举报原因:
原因补充:

(最多只允许输入30个字)