<div id="elec_table">
2 <div class="table-head">
3 <table>
4 <tr>
<td>姓名</td><td>用途</td>
</tr>
11 </table>
12 </div>
13 <div class="table-body">
14 <table>
15 <tr><td>1</td><td>我只是用来测试的</td></tr>
18 <tr><td>2</td><td>我只是用来测试的</td></tr>
19 <tr><td>3</td><td>我只是用来测试的</td></tr>
20 <tr><td>4</td><td>我只是用来测试的</td></tr>
21 <tr><td>5</td><td>我只是用来测试的</td></tr>
22 <tr><td>6</td><td>我只是用来测试的</td></tr>
23 <tr><td>7</td><td>我只是用来测试的</td></tr>
24 <tr><td>8</td><td>我只是用来测试的</td></tr>
25 <tr><td>9</td><td>我只是用来测试的</td></tr>
26 <tr><td>10</td><td>我只是用来测试的</td></tr>
27 <tr><td>11</td><td>我只是用来测试的</td></tr>
28 <tr><td>12</td><td>我只是用来测试的</td></tr>
29 <tr><td>13</td><td>我只是用来测试的</td></tr>
30 <tr><td>14</td><td>我只是用来测试的</td></tr>
31 <tr><td>15</td><td>我只是用来测试的</td></tr>
33 </table>
34 </div>
35 </div>

使用两个table标签,使用3个div,最外层的为全局容器,一个是表头容器,另一个是表体容器。

css如下:

/*外层容器设置高*/
#elec_table{
position:relative;
height:600px;
table-layout : fixed;
}
.bodyBox{
overflow-y:auto;
overflow-x:hidden;
height:570px;
}
/*设置table-layout:fixed固定宽度,表头和表体需要对齐*/
table{
table-layout:fixed;
}
/*设置单元格的宽度,可能会出现内容长需要换行的情况 使用white-space:normal,每个单元格都是一样的宽度*/
#elec_table td{
width:20%;
white-space:normal;
}

注意点:

1.最外侧的div,需要用overflow-x来控制最横向滚动,因为overflow-x、y在IE中存在兼容性问题,当overflow-x/overflow-y其中之一被设置成'scroll'、'auto'、'hidden'时,另一个还是'visible',不会被设置为'auto' 所以,最好使用 "overflow-x:scroll; overflow-y:auto",这时候,右边的在需要时才会显示。如果希望右边的滚动条一直不显示,那么,可以使用:"overflow-x:scroll; overflow-y:hidden;"

2.表头和表体的各列需要对齐,所以可以用table-layout:fixed;来固定宽度

3.当用table-layout:fixed;固定了列宽度,也就会有长的内容会显示不全,那么可以用white-space:normal;来进行换行

table中表头不动,表体产生滚动条的更多相关文章

  1. 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  2. element table固定表头,表的高度自适应解决方法

    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...

  3. ie下div模拟的表格,表头表体无法对齐

    现象:ie下,如果某个区域滚动显示表格内容(div模拟的table),表体出现滚动条的时候,会跟表头无法对齐. 解决方法:1.首先需要知道两个高度:表体最大高度height1.目前表体要显示的内容高度 ...

  4. Bootstrap Table 中文文档(完整翻译版)

    表格参数: 名称 标签 类型 默认 描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格. classes data-classes String ...

  5. MySQL 建表语句 create table 中的列定义

    MySQL 建表语句 create table 中的列定义: column_definition: data_type [NOT NULL | NULL] [DEFAULT default_value ...

  6. 执行相应操作后,将表单及table中数据清空

    使用 ccms.util.clearForm('要清空的表单的id'); $("#table中显示数据部分的id").empty();

  7. easyui DataGrid表体单元格跨列rowspan

    最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的,客户要求报表样式跟他们原有系统的一模一样(如下图1). DataGrid样式好调,只是城市名称单元格跨行 ...

  8. 非常强大的table根据表头排序,点击表头名称,对其内容排序

    js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...

  9. 蓝凌表单的表体调用Javascript

    应用场景:像请假类表单会在从表输入开始时间.结束时间等字段 需求1:客户希望根据开始.结束时间自动计算小时数 解决方法: 1.主表单增加一行,设三个字段[开始时间合计].[结束时间合计].[开始结束时 ...

随机推荐

  1. win10总是2分钟就自动睡眠怎么办 win10系统自动休眠bug怎么解决(转)

        解决方法如下: 1.右键点击开始图标,选择[运行],或者利用快捷键“win+R”打开运行窗口,win键是ctrl和alt键中间的徽标键:

  2. [转帖]nginx upstream模块--负载均衡

    nginx upstream模块--负载均衡 https://www.cnblogs.com/linjiqin/p/5494783.html Module ngx_http_upstream_modu ...

  3. [转帖] 打开加密SQLite文件的方法

    Copy From http://blog.csdn.net/sean4m/article/details/50211565 mark 下 正好工作用到了这个东西. 版本:SQLiteExpertPr ...

  4. s-axis-config-tdata

  5. hdu1285

    解题思路:拓扑排序+优先队列,每次找入度为零时的点的时候且值最小的...我觉得题目有点问题,刚开始写的时候,以为样例的答案是1 4 2 3,毕竟1和4没输过啊...结果去看了样例一眼,傻了. #inc ...

  6. python系列-1 字符串操作

    1.去除空格   str.strip():删除字符串两边的指定字符,括号的写入指定字符,默认为空格 >>> a=' hello ' >>> b=a.strip() ...

  7. Django-website 程序案例系列-15 singnal分析

    在django框架中singnal的应用相当于在你执行某些重要函数语句时在这条语句的前后放置两个预留的钩子,这两个钩子就是singnal,这个钩子也可以理解成两个触发器,当出现执行语句前后是触发执行某 ...

  8. webapi Filter

    webapi的controller和action的控制. 使用场景:webapi接收到加密数据以及签名.验证签名是否有效.我们不能一个个action增加判断. 所以添加Filter是比较明智的方法. ...

  9. Java监听器Listener的使用详解

    监听器用于监听Web应用中某些对象的创建.销毁.增加,修改,删除等动作的发生,然后作出相应的响应处理.当监听范围的对象的状态发生变化的时候,服务器自动调用监听器对象中的方法.常用于统计网站在线人数.系 ...

  10. 因为代理原因导致的NotSerializableException

    错误信息: NotSerializableException Failed to serialize object Proxy   报这个错,一开始就往没有序列化这一块想,可是报错点是: excelT ...