以下仅供参考!不对的评论下指正!
table貌似无论怎么设置td 高度table都会根据数据的变化而变化(宽度table-layout:fixed样式可以做到固定)高度而且当数据少的时候高度会平分table高度导致页面不好看whenload方法是用来解决当数据少的时候设置table高度使得界面不会难看!
现在table头不动的解决方式是使用2个table 一个用来显示我们需要看到的表头table1 一个用来显示表体table2,他们用用同样的宽度 表体装载在一个稍大于表体宽度的div2下(宽度自己看着设置) 表头table1和div1装载在相同的父标签div下
为了使得table1和table2显示宽度上能平齐用空白占位符占用了table2对应th区域。对应的th用占用相等空间的占位符占用。
以下有空格占位符的案例(都是百度的)
  == 普通的英文半角空格
  == ==   == no-break space (普通的英文半角空格但不换行)
  == 中文全角空格 (一个中文宽度)
  ==   == en空格 (半个中文宽度)
  ==   == em空格 (一个中文宽度)
  == 四分之一em空格 (四分之一中文宽度)
相比平时的空格( ),nbsp拥有不间断(non-breaking)特性。即连续的nbsp会在同一行内显示。即使有100个连续的nbsp,浏览器也不会把它们拆成两行。
<!doctype html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .rendDivices,.CheckHis { border: 1px solid #C1C1C1; } th { height: 10px; } td { word-wrap:break-word; width: 11%; text-align: left; height: 10px; } tr{ max-height:10px; } </style> <script type="text/javascript"> function whenLoad(){ var table = document.getElementById("checkShowTable"); var cel=table.children[0].children; if(cel.length<20){ table.style.height=cel.length*20+"px"; var sss=0; } } </script> <title>test</title> </head> <body onload="whenLoad()"> <div > <div style="margin: auto; boder: 3px solid red; width: 800px;height:600px;"> <table id="checkShowTableHead" class="rendDivices" style="margin-top: 10px;width:100%;table-layout:fixed"> <tr> <th class="rendDivices thnc">请问</th> <th class="rendDivices thnc">去问人体有</th> <th class="rendDivices thnc">去问人体</th> <th class="rendDivices thnc">阿斯蒂芬</th> <th class="rendDivices thnc">自行车v不</th> <th class="rendDivices thnc">人推哦地方</th> <th class="rendDivices thnc">阿斯蒂芬</th> </tr> </table> <div style="width:815px;height: 100%;overflow:auto;margin-top:0;"}> <table id="checkShowTable" class="rendDivices" style="width:800px;height: 100%;margin-top:0;margin-top: 0;table-layout:fixed"> <tr> <th class="rendDivices thncr">  </th> <th class="rendDivices thncr">      </th> <th class="rendDivices thncr">    </th> <th class="rendDivices thncr">    </th> <th class="rendDivices thncr">     </th> <th class="rendDivices thncr">      </th> <th class="rendDivices thncr">    </th> </tr> <tr> <td class="rendDivices thncr">1111111111111111</td> <td class="rendDivices thncr">2222222222</td> <td class="rendDivices thncr">33333333333333333333333333333333</td> <td class="rendDivices thncr">555555555555555555555555555555555555</td> <td class="rendDivices thncr">44444444444444444444444444444444444444444444444444444444444</td> <td class="rendDivices thncr">66666666666666666666666666666666666666666666666</td> <td class="rendDivices thncr">77777777777777777777777777777777777777</td> </tr> </table> </div> </div> </div> </body> </html>
相关推荐
主要介绍了html Table 表头固定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
table表头点击可实现排序,用JavaScript编写,可修改使用
table的表头固定,用的是一个TABLE
一个table表头固定,内容可滚动的实用例子,同时可以实现增加,删除功能
elementUI给table表头行设置背景颜色样式
CSS控制table表头
使用演示table元素,使用jquery实现表头及列固定,简单实用。
js table 表头拖动 适应各种主流浏览器很好的用户体验度
Bootstrap table还有一个很多强大的功能,下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的实例代码,需要的朋友参考下吧
table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢?
固定table表头的插件.zip
table表头拉伸效果,导航栏自动隐藏,代码简单,可以直接使用。
实现表头和列固定,并可行多表头,多列(左右都可以),无错位
NULL 博文链接:https://xafc2370.iteye.com/blog/1518661
制作的样式中要求table表头固定,内容滚动,同时checkbox右对齐,支持全选
移动端项目,移动端table固定表头与固定第一列,HTML5和css3
(可用于字段说明,建议先去官方网站查看)实现效果就是鼠标放到指定字段,显示提示说明,如兑换比例说明。。。。用的到的推荐使用
超好用的jquery插件,可以让表头固定 ,几乎兼容所有浏览器
绝对是好东西,非常简单实用,表头有箭头表明是降序还是升序一目了然,非常实用
网络下载后的资源,进行改造后,实现单行多行,表头表尾浮动显示。