直接COPY下面代码，在桌面新建个HTML文件，即可，我想问怎么修改<script language="javascript" type="text/javascript">... ...</script>里面的东西可以使表头和值对齐，请告知具体做法，谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>定点医疗机构普通门诊费用统计</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<style type="text/css">
body
{
background-color: #333;
}
table.DataList
{
border:solid 1px black;
padding:0px;
font-family: Verdana, 宋体, Sans-Serif;
font-size: 14.9px;
border-collapse:collapse;
background-color:#b4b4b4;
}
.DataListFirstRow
{
font-family: Arial,宋体,Sans-serif;
color:#FFFFFF;
background-color:#6595D6;
font-size: 14.9px;
font-weight: bold;
border :solid 1px white;
padding: 5px 2px 5px 2px;
text-align: center;
}
.DataListFirstRowCell
{
font-family: Arial,宋体,Sans-serif;
color:#FFFFFF;
background-color:#6595D6;
font-weight: bold;
font-size: 14.9px;
border :solid 1px white;
padding: 4px 4px 4px 4px;
text-align: center;
}.DataListItemRow
{
table-layout: auto;
padding-right: 2px;
border :solid 1px black;
padding-left: 2px;
font-size: 14.9px;
padding-bottom: 2px;
color: #000000;
padding-top: 2px;
font-family: Arial,宋体,Sans-serif;
border-collapse: collapse;
background-color: #ffffff;
}
.DataListItemRowCell
{
font-family: Arial,宋体,Sans-serif;
font-size: 14.9px;
border :solid 1px b4b4b4;
padding: 4px 4px 4px 4px;
}
</style>
<script language="javascript" type="text/javascript">
function CreateGridHeader(DataDiv, dgData, HeaderDiv)
{
var DataDivObj = document.getElementById(DataDiv);
var DataGridObj = document.getElementById(dgData);
var HeaderDivObj = document.getElementById(HeaderDiv);
//********* Creating new table which contains the header row ***********
var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
DataDivObj.style.paddingTop = '0px';
var DataDivWidth = DataDivObj.clientWidth;
DataDivObj.style.width = '5000px';
//********** Setting the style of Header Div as per the Data Div ************
HeaderDivObj.className = DataDivObj.className;
HeaderDivObj.style.cssText = DataDivObj.style.cssText;
//**** Making the Header Div scrollable. *****
HeaderDivObj.style.overflow = 'auto';
//*** Hiding the horizontal scroll bar of Header Div ****
HeaderDivObj.style.overflowX = 'hidden';
//**** Hiding the vertical scroll bar of Header Div ****
HeaderDivObj.style.overflowY = 'hidden';
HeaderDivObj.style.height = 20 + 'px';
//**** Removing any border between Header Div and Data Div ****
HeaderDivObj.style.borderBottomWidth = '0px';
//********** Setting the style of Header Table as per the GridView ************
HeadertableObj.className = DataGridObj.className;
//**** Setting the Headertable css text as per the GridView css text
HeadertableObj.style.cssText = DataGridObj.style.cssText;
HeadertableObj.border = '1px';
HeadertableObj.rules = 'all';
HeadertableObj.cellPadding = DataGridObj.cellPadding;
HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
//********** Creating the new header row **********
var Row = HeadertableObj.insertRow(0);
Row.className = DataGridObj.rows[0].className;
Row.style.cssText = DataGridObj.rows[0].style.cssText;
Row.style.fontWeight = 'bold';
//******** This loop will create each header cell *********
for(var iCntr =0; iCntr < DataGridObj.rows[0].cells.length; iCntr++)
{
var spanTag = Row.appendChild(document.createElement('td'));
spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
var width = 0;
//****** Setting the width of Header Cell **********
if(spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth)
{
width = spanTag.clientWidth-1;
}
else
{
width = DataGridObj.rows[1].cells[iCntr].clientWidth-1;
}
if(iCntr<=DataGridObj.rows[0].cells.length-2)
{
spanTag.style.width = width +'px';
}
else
{
spanTag.style.width = width + 20 + 'px';
}
DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
}
var tableWidth = DataGridObj.clientWidth;
//********* Hidding the original header of GridView *******
DataGridObj.rows[0].style.display = 'none';
//********* Setting the same width of all the componets **********
HeaderDivObj.style.width = DataDivWidth + 'px';
DataDivObj.style.width = DataDivWidth + 'px';
DataGridObj.style.width = tableWidth + 'px';
HeadertableObj.style.width = tableWidth + 20 + 'px';
return false;
}
function Onscrollfnction()
{
var div = document.getElementById('DataDiv');
var div2= document.getElementById('HeaderDiv');
//****** Scrolling HeaderDiv along with DataDiv ******
div2.scrollLeft = div.scrollLeft;
return false;
}
</script>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>定点医疗机构普通门诊费用统计</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<style type="text/css">
body
{
background-color: #333;
}
table.DataList
{
border:solid 1px black;
padding:0px;
font-family: Verdana, 宋体, Sans-Serif;
font-size: 14.9px;
border-collapse:collapse;
background-color:#b4b4b4;
}
.DataListFirstRow
{
font-family: Arial,宋体,Sans-serif;
color:#FFFFFF;
background-color:#6595D6;
font-size: 14.9px;
font-weight: bold;
border :solid 1px white;
padding: 5px 2px 5px 2px;
text-align: center;
}
.DataListFirstRowCell
{
font-family: Arial,宋体,Sans-serif;
color:#FFFFFF;
background-color:#6595D6;
font-weight: bold;
font-size: 14.9px;
border :solid 1px white;
padding: 4px 4px 4px 4px;
text-align: center;
}.DataListItemRow
{
table-layout: auto;
padding-right: 2px;
border :solid 1px black;
padding-left: 2px;
font-size: 14.9px;
padding-bottom: 2px;
color: #000000;
padding-top: 2px;
font-family: Arial,宋体,Sans-serif;
border-collapse: collapse;
background-color: #ffffff;
}
.DataListItemRowCell
{
font-family: Arial,宋体,Sans-serif;
font-size: 14.9px;
border :solid 1px b4b4b4;
padding: 4px 4px 4px 4px;
}
</style>
<script language="javascript" type="text/javascript">
function CreateGridHeader(DataDiv, dgData, HeaderDiv)
{
var DataDivObj = document.getElementById(DataDiv);
var DataGridObj = document.getElementById(dgData);
var HeaderDivObj = document.getElementById(HeaderDiv);
//********* Creating new table which contains the header row ***********
var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
DataDivObj.style.paddingTop = '0px';
var DataDivWidth = DataDivObj.clientWidth;
DataDivObj.style.width = '5000px';
//********** Setting the style of Header Div as per the Data Div ************
HeaderDivObj.className = DataDivObj.className;
HeaderDivObj.style.cssText = DataDivObj.style.cssText;
//**** Making the Header Div scrollable. *****
HeaderDivObj.style.overflow = 'auto';
//*** Hiding the horizontal scroll bar of Header Div ****
HeaderDivObj.style.overflowX = 'hidden';
//**** Hiding the vertical scroll bar of Header Div ****
HeaderDivObj.style.overflowY = 'hidden';
HeaderDivObj.style.height = 20 + 'px';
//**** Removing any border between Header Div and Data Div ****
HeaderDivObj.style.borderBottomWidth = '0px';
//********** Setting the style of Header Table as per the GridView ************
HeadertableObj.className = DataGridObj.className;
//**** Setting the Headertable css text as per the GridView css text
HeadertableObj.style.cssText = DataGridObj.style.cssText;
HeadertableObj.border = '1px';
HeadertableObj.rules = 'all';
HeadertableObj.cellPadding = DataGridObj.cellPadding;
HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
//********** Creating the new header row **********
var Row = HeadertableObj.insertRow(0);
Row.className = DataGridObj.rows[0].className;
Row.style.cssText = DataGridObj.rows[0].style.cssText;
Row.style.fontWeight = 'bold';
//******** This loop will create each header cell *********
for(var iCntr =0; iCntr < DataGridObj.rows[0].cells.length; iCntr++)
{
var spanTag = Row.appendChild(document.createElement('td'));
spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
var width = 0;
//****** Setting the width of Header Cell **********
if(spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth)
{
width = spanTag.clientWidth-1;
}
else
{
width = DataGridObj.rows[1].cells[iCntr].clientWidth-1;
}
if(iCntr<=DataGridObj.rows[0].cells.length-2)
{
spanTag.style.width = width +'px';
}
else
{
spanTag.style.width = width + 20 + 'px';
}
DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
}
var tableWidth = DataGridObj.clientWidth;
//********* Hidding the original header of GridView *******
DataGridObj.rows[0].style.display = 'none';
//********* Setting the same width of all the componets **********
HeaderDivObj.style.width = DataDivWidth + 'px';
DataDivObj.style.width = DataDivWidth + 'px';
DataGridObj.style.width = tableWidth + 'px';
HeadertableObj.style.width = tableWidth + 20 + 'px';
return false;
}
function Onscrollfnction()
{
var div = document.getElementById('DataDiv');
var div2= document.getElementById('HeaderDiv');
//****** Scrolling HeaderDiv along with DataDiv ******
div2.scrollLeft = div.scrollLeft;
return false;
}
</script>
</head>
<form name="Form1" method="post" action="HospFeeBaseStatisticForm.aspx" id="Form1">
<input type="hidden" name="txtQueryNY" id="txtQueryNY" value="2011-06" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />
<table id="tabMain" style="margin-left: 2px" cellspacing="0" cellpadding="0" width="761"
align="left" border="0">
<tr>
<td align="left">
<div id="HeaderDiv">
</div>
<div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 1200px;
height: 100px;" onscroll="Onscrollfnction();">
<table class="DataList" cellspacing="0" rules="all" border="1" id="dgData" style="border-collapse:collapse;">
<tr class="DataListFirstRow" nowrap="nowrap">
<td class="DataListFirstRowCell" nowrap="nowrap" align="center" valign="middle" rowspan="1" style="border-style:Solid;height:25px;"> 医院名称<td class=DataListFirstRowCell nowrap>医院编码</td><td class=DataListFirstRowCell nowrap>所属区县</td><td class=DataListFirstRowCell nowrap>医院级别</td><td class=DataListFirstRowCell nowrap>医院类别</td><td class=DataListFirstRowCell nowrap>经营性质</td><td class=DataListFirstRowCell nowrap>认定批次</td><td class=DataListFirstRowCell nowrap>全部医疗类别总金额</td><td class=DataListFirstRowCell nowrap>全部医疗类别人数</td><td class=DataListFirstRowCell nowrap>全部医疗类别人均费用</td><td class=DataListFirstRowCell nowrap>全部医疗类别人次</td><td class=DataListFirstRowCell nowrap>全部医疗类别次均费用</td>
</tr><tr class="DataListItemRow" nowrap="nowrap">
<td class="DataListItemRowCell" nowrap="nowrap" align="left">延庆结防所</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">29154001</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">延庆县</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">一级</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">对外中医</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">非营利性</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">1</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">6175</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">1120</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">5.51</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">390</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">15.83</td>
</tr><tr class="DataListAlternationRow" nowrap="nowrap">
<td class="DataListItemRowCell" nowrap="nowrap" align="left">延庆结防所</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">29154001</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">延庆县</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">一级</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">对外专科</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">非营利性</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">1</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">37335</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">4480</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">8.33</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">1718</td><td class="DataListItemRowCell" nowrap="nowrap" align="right">21.73</td>
</tr>
</table>
</div>
</td>
</tr> </table>
<div style="border-right: chartreuse 1px solid; border-top: chartreuse 1px solid;
font-weight: bold; z-index: 444444; left: 29px; border-left: chartreuse 1px solid;
width: 231px; color: orangered; direction: ltr; line-height: normal; border-bottom: chartreuse 1px solid;
font-style: normal; font-family: Sans-Serif, 宋体-方正超大字符集; letter-spacing: normal;
position: absolute; top: -233px; height: 27px; background-color: #ffff99; text-align: center;
font-variant: normal; text-decoration: none; outline-color: Gray; outline-width: thin;
padding: 6px 5px 6px 5px; white-space: nowrap; letter-spacing: 5px; word-spacing: 5px;"
id="loader">
</div>
<script>CreateGridHeader('DataDiv', 'dgData', 'HeaderDiv');</script></form>
</body>
</html>