Demo
<div id="divScroll" style="overflow-x: hidden"> <table id="tableAppointment" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%"> <tr> <td class="csstextheader" width="70px"></td> <td class="csstextheader" width="70px"> <b>Time Slot </b> </td> <td><b>Room 7</b></td> <td><b>Room 8</b></td> <td><b>Room 9</b></td> <td><b>Room 10</b></td> </tr> <tr class="csstablelisttd"> <td width="70px">08:00AM</td> <td>00</td> <td class="csstdred">John</td> <td> </td> <td> </td> <td> </td> </tr> </table> </div>
在窗口上调用onload
function resolutionIndependent() { var height; var tableMain; var divScroll; if (document.body && document.body.offsetWidth) { height = document.body.offsetHeight; } if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) { height = document.documentElement.offsetHeight; } if (window.innerWidth && window.innerHeight) { height = window.innerHeight; } tableMain = document.getElementById('tableMain'); divScroll = document.getElementById('divScroll'); tableMain.style.height = parseFloat(height - 170) + 'px'; divScroll.style.height = parseFloat(height - 170) + 'px'; divScroll.style.overflow = "auto"; } //***tableMain which is outer table of divScroll***
我必须制作第一行的固定标题..
我将style =“position:fixed”添加到第一行的每个单元格.但没有得到输出
..怎么可能
解决方法
嘿,你甚至可以使用一个简单的jquery函数,它可以在不改变你的HTML代码的情况下为你提供结果
var tdWidth = $("#tableAppointment tbody tr td").width(); $("#tableAppointment thead").css({'position': 'fixed','top': '0','left': '-0.2%','background-color': '#f94d4d','color': '#FFFFFF','text-align': 'center','width': '100%'}); $("#tableAppointment thead tr th").width(tdWidth);
工作示例是jsfiddle
原文地址:https://www.jb51.cc/jquery/176854.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。