table表头固定,内容可滚动问题
2017-12-28 18:06
671 查看
1.首先新建html页面body中写入:
<div class="title_div" id="tdiv"> <table class="title_tb" id="tb1"> <tr> <td width="80">文件类型</td> <td width="80">文件名</td> <td width="80">大小</td> <td width="80">全景</td> <td width="80">状态</td> <td width="150">操作</td> </tr> </table> </div> <div class="data_div" id="ddiv"> <table class="title_tb" id="tb2"> <tr> <td width="80">0</td> <td width="80">gaaaaaaaaadddddsssssssssssssssssssssssssssseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td> <td width="80">图片亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园</td> <td width="80">300kb亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园</td> <td width="80">上传成功亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园</td> <td class="last_td" width="150"> <div class="delate"><a href="">删 除</a></div> <div class="upload"><a href="">重新上传</a></div> </td> </tr> <tr> <td>1</td> <td>图片</td> <td>300kb</td> <td>是</td> <td>上传成功</td> <td class="last_td"> <div class="delate"><a href="">删 除</a></div> <div class="upload"><a href="">重新上传</a></div> </td> </tr> <tr> <td>亲子乐园</td> <td>图片</td> <td>300kb</td> <td>是</td> <td>上传成功</td> <td class="last_td"> <div class="delate"><a href="">删 除</a></div> <div class="upload"><a href="">重新上传</a></div> </td> </tr> <tr> <td>亲子乐园</td> <td>图片</td> <td>300kb</td> <td>是</td> <td>上传成功</td> <td class="last_td"> <div class="delate"><a href="">删 除</a></div> <div class="upload"><a href="">重新上传</a></div> </td> </tr> <tr> <td>亲子乐园</td> <td>图片</td> <td>300kb</td> <td>是</td> <td>上传成功</td> <td class="last_td"> <div class="delate"><a href="">删 除</a></div> <div class="upload"><a href="">重新上传</a></div> </td> </tr> <tr> <td>亲子乐园</td> <td>图片</td> <td>300kb</td> <td>是</td> <td>上传成功</td> <td class="last_td"> <div class="delate"><a href="">删 除</a></div> <div class="upload"><a href="">重新上传</a></div> </td> </tr> </table> </div>2.对表格进行样式编写:
html, body { margin: 0; padding: 0; } .title_tb, .data_div { overflow: auto; border-collapse: collapse; cellspacing: 0; cellpadding: 0; text-align: center; table-layout: fixed; width: 904px; } #tb1 td { /*width: 80px;*/ border-bottom: 1px solid #c2d4f2; border-right: 1px solid #c2d4f2; font-size: 14px; text-align: center; height: 38px; color: #fff; background: #4166a2; } #tb2 td { text-indent: 8px; border-bottom: 1px solid #c2d4f2; border-right: 1px solid #c2d4f2; font-size: 14px; text-align: center; height: 38px; color: #626262; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .title_div, .data_div { overflow-x: hidden; overflow-y: scroll; background: white; } .data_div { height: 100px; } .last_td { position: relative; } .delate { position: absolute; right: 115px; top: 6.5px; width: 70px; line-height: 25px; background: #ccc; border-radius: 5px; } .delate a { display: block; color: #666; } .upload { position: absolute; right: 15px; top: 6.5px; width: 90px; line-height: 25px; background: #009688; border-radius: 5px; } .upload a { display: block; color: #fff; }3.最重要的一步,js进行操作表头和滚动条:
var jstb1 = document.getElementById("tb1").rows[0]; var jstb2 = document.getElementById("tb2").rows[0]; var divw = 0; for (var i = 0; i < 6; i++) { if (jstb1.cells[i].clientWidth > jstb2.cells[i].clientWidth) { jstb2.cells[i].style.width = parseInt(jstb1.cells[i].clientWidth) - 2 + "px"; divw += parseInt(jstb1.cells[i].clientWidth) - 2; } else { jstb1.cells[i].style.width = parseInt(jstb2.cells[i].clientWidth) - 2 + "px"; divw += parseInt(jstb2.cells[i].clientWidth) - 2; } } divw += 27; divw += "px"; document.getElementById("tdiv").style.width = divw; document.getElementById("ddiv").style.width = divw; document.getElementById("tdiv1").style.width = divw; document.getElementById("ddiv1").style.width = divw;
相关文章推荐
- bootstrap-table表头固定,表内容不对齐的问题
- 【经典思维】table 表头固定,内容自由滚动
- 记录:固定table表头不动内容滚动
- 实现table表头固定 内容滚动效果
- DIV实现左边表头固定、右边内容滚动的效果代码
- bootstrap-table设置height后表头与内容无法对齐的问题
- 自己写了个table 固定table头部 使表可以滚动 注意稍不注意表头和表体就会出现不对齐的情况
- bootstrap-table 表头,和内容对齐问题
- jquery固定表头不滚动让内容滚动的代码实现
- bootstrap-table表头固定,表内容不对齐的另类解决方法
- JS实现table表格固定表头且表头随横向滚动而滚动
- 表头固定,内容可以滚动例子
- JS实现固定表头,实现内容滚动
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- js简单固定table表头及css问题分析。 复制代码 <head> <meta name="viewport" content="width=device-width" /> <ti
- BootStrap的table表头固定tbody滚动的实例代码
- CSS实现固定表头 内容溢出滚动
- table 表头固定,表体滚动的css方法
- table中head表头固定,body滚动
- bootstrap表格固定表头,表格内容滚动条滚动显示