最后大魔王第一季风车:高分求教javascript 多级表头问题,请高手解决!

来源:百度文库 编辑:高校问答 时间:2024/05/04 07:23:32
我先自己回答一下,在回答里给出全部源码,希望高手修改一下给我.

就是下面这个程序,在IE里可以运行的,希望高手能帮忙解决一下!<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Language" content="zh-cn">
<style type="text/css">
<!--
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0
}

table, td, a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

.td
{
nowrap:'true';
}

div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 100%;
}

/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
\html div.tableContainer/* */ {
padding: 0 16px 0 0
}

/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer {
height: auto;
padding: 0;
width: 740px
}

/* Reset overflow value to hidden for all non-IE browsers. */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer {
height: 285px;
overflow: hidden;
width: 756px
}

/* define width of table. IE browsers only */
/* if width is set to 100%, you can remove the width */
/* property from div.tableContainer and have the div scale */
div.tableContainer table {
float: left;
width: 100%
}

/* WinIE 6.x needs to re-account for padding. Give it a negative margin */
\html div.tableContainer table/* */ {
margin: 0 -16px 0 0
}

/* define width of table. Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer table {
float: none;
margin: 0;
width: 740px
}

/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer table {
width: 756px
}

/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative;
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
}

/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body thead[class].fixedHeader tr {
display: block
}

/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: center
}

/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}

/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}

/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body tbody[class].scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 2px 3px
}

tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 2px 3px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
head:first-child+body thead[class].fixedHeader th {
width: 200px
}

head:first-child+body thead[class].fixedHeader th + th {
width: 250px
}

head:first-child+body thead[class].fixedHeader th + th + th {
border-right: none;
padding: 4px 4px 4px 3px;
width: 316px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
head:first-child+body tbody[class].scrollContent td {
width: 200px
}

head:first-child+body tbody[class].scrollContent td + td {
width: 250px
}

head:first-child+body tbody[class].scrollContent td + td + td {
border-right: none;
padding: 2px 4px 2px 3px;
width: 300px

/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
}
-->
</style>
<title>测试</title>
</head><body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="1565" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th width="56" rowspan="3" >分公司/电厂</th>
<th width="87" colspan="2" rowspan="2">发电量</th>
<th width="87" colspan="2" rowspan="2">供热量</th>
<th width="110" colspan="2" rowspan="2">综合供</th>
<th width="95" colspan="2" rowspan="2">燃料单位<br>
燃料成本</th>
<th width="132" height="24" colspan="3">供煤量</th>
<th width="176" height="24" colspan="4">供应质量</th>
<th width="176" height="24" colspan="4">标煤单位价(含税)</th>
<th width="132" height="24" colspan="3">耗煤量</th>
<th width="132" height="24" colspan="3">入炉煤质量</th>
<th width="221" height="24" colspan="5">入炉煤折标煤价(不含税)</th>
<th width="45" rowspan="3">本月库存</th>
<th width="45" rowspan="3">煤场盈亏</th>
<th width="45" height="24">热值差 </th>
</tr>
<tr>
<th width="44">本月</th>
<th width="88" colspan="2">累计</th>
<th width="88" colspan="2"> 本月</th>
<th width="88" colspan="2">累计</th>
<th width="88" colspan="2">本月</th>
<th width="88" colspan="2">累计</th>
<th width="44">本月</th>
<th width="88" colspan="2">累计</th>
<th width="44">本月</th>
<th width="88" colspan="2">累计</th>
<th width="44">本月</th>
<th width="88" colspan="2">累计</th>
<th width="44" rowspan="2">考核值</th>
<th width="45" rowspan="2">比较</th>
<th width="45" rowspan="2">累计</th>
</tr>
<tr>
<th width="44">本月</a></th>
<th width="44">累计</th>
<th width="36">本月</th>
<th width="51">累计</th>
<th width="51">本月</th>
<th width="51">累计</th>
<th width="51">本月</th>
<th width="44">累计</th>
<th width="44">完成</th>
<th width="44">完成</th>
<th width="44">同比</th>
<th width="44">完成</th>
<th width="44">同比</th>
<th width="44">完成</th>
<th width="44">同比</th>
<th width="44">完成</th>
<th width="44">同比</th>
<th width="44">完成</th>
<th width="44">同比</th>
<th width="44">完成</th>
<th width="44">完成</th>
<th width="44">同比</th>
<th width="44">完成</th>
<th width="44">完成</th>
<th width="44">同比</th>
<th width="44">完成</th>
<th width="44">完成</th>
<th width="44">同比</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td width="56"> </td>
<td width="36"> </td>
<td width="51"> </td>
<td width="36"> </td>
<td width="51"> </td>
<td width="51"> </td>
<td width="51"> </td>
<td width="51"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="44"> </td>
<td width="45"> </td>
<td width="45"> </td>
<td width="45"> </td>
<td width="45"> </td>
</tr>
</tbody>
</table>
</div>

</body></html>

你是学计算机的?
你学的好不?

你是想用javascript 动态生成一个页面吗???