有没有表格宽列可调整的例子或代码?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>WebForm2</title>

</head>
<body>
<table width=800 height=460 id="asdfsdf">

<tr>
<td>

<table id='DataGridXP1' border=1 width='100%' style='table-layout:fixed;border-collapse:collapse;position:relative'>
<tr>
<td width='50px'>列头1</td>
<td>列头目</td>
<td>列头1</td>
<td>列头目</td>
</tr><tr><td>内容1</td><td>内容2</td><td>内容1</td></tr>
</table></td>
</tr> </table>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script language="javascript">
//CreateDataGrid('DataGridXP1');
//function CreateDataGrid(DataGridXP1)
{
var selectBgColor = '#A3A3A3';//被选择行的背景色
var headTdColor = 'menu';//表头背景色
var trOverColor = '#D3D3D3';
function setTdWidth(tdIndex)//设置表格的列宽
{
//alert(tdIndex);
var td = DataGridXP1.rows[0].cells[tdIndex];
var tab = td;
while(tab.tagName!='TABLE')tab=tab.parentElement;//显示表格内容的Table
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;
var headTd = hTab.rows[0].cells[td.cellIndex];
//alert(headTd.width);
td.width = headTd.offsetWidth;
td.style.width = headTd.offsetWidth;
td.innerHTML = "<nobr>" + td.innerHTML + "</nobr>";
//return headTd.offsetWidth;
}
function setHeadDivLeft(div)//
{
var tab = div;
while(tab.tagName!='TABLE')tab=tab.parentElement;
var headDiv = tab.rows[0].firstChild;
while(headDiv.tagName!='DIV')headDiv=headDiv.firstChild;
headDiv.scrollLeft = div.scrollLeft;
}
function initHeadTdWidth()
{
var tab = DataGridXP1;
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;//找到真正的列头Table
for(var i=0;i<hTab.rows[0].cells.length;i++)
{
var td = hTab.rows[0].cells[i];
td.bgColor = headTdColor;
td.style.borderLeftColor = '#eeeeee';
td.style.borderTopColor = '#eeeeee';
td.style.borderRightColor = '#666666';
td.style.borderBottomColor = '#666666';
td.onmousedown = beginResizeTd;
td.onmousemove = setTdCursor;
//td.style.display = DataGridXP1.rows[0].cells[i].style.display;
td.innerHTML = "<nobr>" + td.innerHTML + "</nobr>";
if(DataGridXP1.rows[0].cells[i].width)
{
td.width = DataGridXP1.rows[0].cells[i].width;
td.style.width = DataGridXP1.rows[0].cells[i].width;
}
else if(DataGridXP1.rows[0].cells[i].style.width)
{
td.width = DataGridXP1.rows[0].cells[i].style.width;
td.style.width = DataGridXP1.rows[0].cells[i].style.width;
}
else
{
//默认宽为100
td.width = 100;
td.style.width = 100;
}
}
}
function initMainTdWidth()
{
if(DataGridXP1.rows.length<=0) return;
for(var i=0;i<DataGridXP1.rows[0].cells.length;i++)
//DataGridXP1.rows[0].cells[i].width = setTdWidth(DataGridXP1.rows[0].cells[i]);
setTdWidth(i);
}
function setMainTable()
{
var tab = DataGridXP1;
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;
DataGridXP1.style.position = 'relative';
DataGridXP1.style.top = -hTab.offsetHeight;
DataGridXP1.width = hTab.offsetWidth;
DataGridXP1.style.width = hTab.offsetWidth;
}
function initElement()
{
var html = "<table style='table-layout:fixed;height:100%;width:100%;' cellspacing=0 cellpadding=0>";
html += "<tr><td style='height:expression(firstChild.offsetHeight+1);layout:fixed;'>";
html += "<div style='overflow:hidden;width:expression(parentElement.offsetWidth-18);position:relative;'>";
html += "<table border=1 style='border-collapse:collapse;table-layout:fixed'>";
html += DataGridXP1.rows[0].outerHTML; // + head
html += "</table>";
html += "</div>";
html += "</tr></td><tr><td style='height:*;layout:fixed;'>";
html += "<div id='main' style='overflow:scroll;width:expression(parentElement.offsetWidth);height:100%;' onscroll='setHeadDivLeft(this)'>";
html += DataGridXP1.outerHTML;// + DataGridXP1
html += "</div>";
html += "</td></tr></table>";

DataGridXP1.outerHTML = html;
//DataGridXP1.document.close(); initHeadTdWidth(); //设置表格头的宽
//DataGridXP1.deleteRow(0); //删除显示内容的第一行
initMainTdWidth(); //设置内容表格的宽
setMainTable(); //设置内容表格的位置
}
//DataGridXP1.width = '';
DataGridXP1.style.wordBreak = "break-all";
DataGridXP1.style.tableLayout = 'fixed';
initElement();
////////////////////////// 下面内容设置可以使用鼠标调整列宽 //////////////////////////////////////////////
DataGridXP1.document.attachEvent('onmousemove',resizeTd);
DataGridXP1.document.attachEvent('onmouseup',endResizeTd);
function DataGridXP1.document.onselectstart(){if(document.old)return false;}
function setTdCursor()
{
var td = event.srcElement;
if (td.tagName=="NOBR")
td=td.parentElement;
if(event.offsetX>td.offsetWidth-10 || document.old)
td.style.cursor = "col-resize";
else
td.style.cursor = "auto";
}
//function resizeTimeOut(){endResizeTd()}
function beginResizeTd()
{
var td = event.srcElement;
if (td.tagName=="NOBR")
td=td.parentElement;
if(event.offsetX<td.offsetWidth-10) return;
document.tdDown = true;
var tab = td;while(tab.tagName!="TABLE")tab=tab.parentElement;
document.old=
{
"td":td,
"tdWidth":td.offsetWidth,
"downX":event.x,
"table":tab,
"tableWidth":tab.offsetWidth
}
//setTimeout("resizeTimeOut()",10000);
}
function resizeTd()
{
if(!document.old || document.old["td"].tagName!="TD") return;
if(document.tdDown)
{
document.body.style.cursor = "col-resize";
var offsetWidth = (event.x-document.old["downX"]);
var newWidth = document.old["tdWidth"] + offsetWidth;
if(newWidth<=5) return;
document.old["td"].width =  newWidth;
document.old["td"].style.width = newWidth;
document.old["table"].width = document.old["tableWidth"]+offsetWidth;
document.old["table"].style.width = document.old["tableWidth"]+offsetWidth; setTdWidth(document.old["td"].cellIndex);
setMainTable();
//保存列宽
//var index = document.old["td"].cellIndex;
//divTdWidth.getElementsByTagName("INPUT")[index].value = newWidth;
}
else
{
document.body.style.cursor = "auto";
document.old = null;
}
}
function endResizeTd()
{
document.old = null;
document.tdDown = false;
document.body.style.cursor = "auto";
}
////////////////////// 下面设置点击表格时改变行背景色的事件 ////////////////////////////
DataGridXP1.attachEvent('onclick',doDataGridClick);
DataGridXP1.attachEvent('onmouseover',doDataGridMouseOver);
DataGridXP1.attachEvent('onmouseout',doDataGridMouseOut);
function doDataGridClick()
{
var td = event.srcElement;
if (td.tagName=="NOBR")
td=td.parentElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(DataGridXP1.oldTr!=null)
DataGridXP1.oldTr.bgColor = DataGridXP1.oldColor;
DataGridXP1.oldTr = tr;
DataGridXP1.oldColor = tr.oldColor;//tr.bgColor;
tr.bgColor = selectBgColor;
window.status = '选中行：第'+ (DataGridXP1.oldTr?DataGridXP1.oldTr.rowIndex:'-1') +'行--当前行：第'+ tr.rowIndex +'行';
}
function doDataGridMouseOver()
{
var td = event.srcElement;
if (td.tagName=="NOBR")
td=td.parentElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(tr == DataGridXP1.oldTr) return;
tr.oldColor = tr.bgColor;
tr.bgColor = trOverColor;
window.status = '选中行：第'+ (DataGridXP1.oldTr?DataGridXP1.oldTr.rowIndex:'-1') +'行--当前行：第'+ tr.rowIndex +'行';
}
function doDataGridMouseOut()
{
var td = event.srcElement;
if (td.tagName=="NOBR")
td=td.parentElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(tr == DataGridXP1.oldTr) return;
tr.bgColor = tr.oldColor;
}
}
</script>
不行呀,如果是代码的话可以发到我信箱里:谢谢[email protected]
我在ie6测试了一下 LxcJie(肖冲) 的代码，可以的。