<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div>
<table id="tabListHeader" border="1" cellspacing="0">
<tr>
<td>
ID
</td>
<td>
名称
</td>
</tr>
</table>
<div id="list" style="height: 60px; width: 100%; overflow: auto">
<table id="tabList" border="1" cellspacing="0" width="100%">
<tr>
<td>
1
</td>
<td>
Jerry
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Tom.Zhang
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Ryo
</td>
</tr>
<tr>
<td>
4
</td>
<td>
King
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var tabList = document.getElementById("tabList");
var tabListHeader = document.getElementById("tabListHeader");
if (typeof (tabListHeader) == "undefined") {
throw new Error("表头未定义");
}
if (typeof (tabListHeader.rows[0]) == "undefined") {
throw new Error("表头行未定义");
}
if (typeof (tabList) == "undefined") {
throw new Error("列表未定义");
}
// tabListHeader.style = tabList.style;
if (tabList.rows.length > 0) {
//alert(tabList.rows[0].cells.length);
for (var i = 0; i <= tabList.rows[0].cells.length - 1; i++) {
//alert(tabList.rows[0].cells[i].clientWidth);
if (typeof (tabListHeader.rows[0].cells[i]) == "undefined") {
throw new Error("列头未定义");
}
else {
var tdWidth = tabList.rows[0].cells[i].clientWidth;
var tdHeaderWidth = tabListHeader.rows[0].cells[i].clientWidth
alert(tdWidth);
alert(tdHeaderWidth);
if (tdWidth > tdHeaderWidth) {
//tabListHeader.rows[0].cells[i].clientWidth = tdWidth;
tabListHeader.rows[0].cells[i].style.width = tdWidth - 2 + "px";
}
else {
//tabList.rows[0].cells[i].clientWidth = tdHeaderWidth;
tabList.rows[0].cells[i].style.width = tdHeaderWidth - 2 + "px";
}
}
}
}
</script>以上代码在FireFox中,可以实现我要的效果,
但是在IIS中的滚动条不见了,
麻烦大家指定如何改可以兼容FireFox IE6,7,8 谢谢
解决方案 »
- 提取HTML代码中的图片URL地址,<img标签内属性排列不规则情况,正则怎么写
- IE7下,如何判断本地文件是否存在?
- 求一正则 验证日期格式 DD/MM/YYYY
- 高分请高手们进来解决一个简单的JavaScript页面代码转换为数据绑定问题
- 哪位大哥给小弟一个不错的JavaScript调试工具啊,最好带上简要的使用说明!谢谢啦!
- js函数使用问题
- jquery插件学习之二——N级导航栏
- 我的ie6居然创建不了xmlhttp对象,怎么办啊?
- 如何给javascript的函数传递多个参数
- window.open() 如何去掉右上角的最小化按钮?
- javascript嵌套问题,嵌套的比较多
- aa.jsp中有iframe,源文件index.jsp可以弹出div层,可以屏蔽index.jsp,但不能屏蔽aa.jsp
height: 60px 换成80px 应该就能看到了
<div id="list" style="height: 60px; width: 100%; overflow: auto">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
}
</style>
</head>
<script type="text/javascript">
var tabList = document.getElementById("tabList");
var tabListHeader = document.getElementById("tabListHeader");
if (typeof (tabListHeader) == "undefined") {
throw new Error("表头未定义");
}
if (typeof (tabListHeader.rows[0]) == "undefined") {
throw new Error("表头行未定义");
}
if (typeof (tabList) == "undefined") {
throw new Error("列表未定义");
}
// tabListHeader.style = tabList.style;
if (tabList.rows.length > 0) {
//alert(tabList.rows[0].cells.length);
for (var i = 0; i <= tabList.rows[0].cells.length - 1; i++) {
//alert(tabList.rows[0].cells[i].clientWidth);
if (typeof (tabListHeader.rows[0].cells[i]) == "undefined") {
throw new Error("列头未定义");
}
else {
var tdWidth = tabList.rows[0].cells[i].clientWidth;
var tdHeaderWidth = tabListHeader.rows[0].cells[i].clientWidth
alert(tdWidth);
alert(tdHeaderWidth);
if (tdWidth > tdHeaderWidth) {
//tabListHeader.rows[0].cells[i].clientWidth = tdWidth;
tabListHeader.rows[0].cells[i].style.width = tdWidth - 2 + "px";
}
else {
//tabList.rows[0].cells[i].clientWidth = tdHeaderWidth;
tabList.rows[0].cells[i].style.width = tdHeaderWidth - 2 + "px";
}
}
}
}
</script>
<body>
<div>
<table id="tabListHeader" border="1" cellspacing="0" width="100%">
<tr>
<td width="30%">
ID
</td>
<td width="70%">
名称</td>
</tr>
</table>
<div id="list" style="height: 60px; width: 100%; overflow: auto; overflow-x:hidden">
<table id="tabList" border="1" cellspacing="0" width="100%">
<tr>
<td width="30%">
1
</td>
<td width="70%">
Jerry
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Tom.Zhang
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Ryo
</td>
</tr>
<tr>
<td>
4
</td>
<td>
King
</td>
</tr>
</table>
</div>
</div>
</body>
</html>