Css 水平滚动表格内容，但保留行标题
我想创建一个带有行标题的表。此表很可能有太多的列，无法适应屏幕，尤其是在移动设备上。因为它有更多的行，所以我不能交换行和列 我想最好的解决办法是在水平滚动其他单元格的同时保留行标题 我不知道如何做到这一点。简单地将行标题td:first child设置为position:fixed是不起作用的，因为垂直滚动会使行标题及其行不对齐 我创建了一个小JSFIDLE进行实验：Css 水平滚动表格内容，但保留行标题,css,scroll,html-table,row,horizontal-scrolling,Css,Scroll,Html Table,Row,Horizontal Scrolling,我想创建一个带有行标题的表。此表很可能有太多的列，无法适应屏幕，尤其是在移动设备上。因为它有更多的行，所以我不能交换行和列 我想最好的解决办法是在水平滚动其他单元格的同时保留行标题 我不知道如何做到这一点。简单地将行标题td:first child设置为position:fixed是不起作用的，因为垂直滚动会使行标题及其行不对齐 我创建了一个小JSFIDLE进行实验： 您可以创建两个表 1-保存行标题的一个 2-将包含您的数据并可滚动的一个 <table id="table-header"
您可以创建两个表 1-保存行标题的一个 2-将包含您的数据并可滚动的一个
<table id="table-header"></table>
<table id="table-items"></table>
否：我没有删除第二个表中的行标题。您的解决方案就在这里 Table.html superTables.js
恐怕不行。正如我在文章中提到的，通过将行标题设置为position:fixed，垂直滚动将不再有效。很抱歉，这是我的错，我忽略了这一部分。我认为这是不可能的widthout js或类似的东西！！！为简单起见，您可以将整个表分成两部分。第一个用于行标题，第二个用于其他行，然后应用所需的js。一旦我应用这个过程来制作一个类似Excel工作表的behavior.css就可以了。然后你要么把桌子分开；或者保留原始表添加另一个表，如RowHeader a0。。。。。RowHeader a9然后将两个表放入另一个表或div/s中，并相应地使css溢出-x/y，以使一个稳定，另一个水平滚动。垂直滚动条将保留。请注意，在这种情况下，滚动条将根据您的css设置显示在div或表中。这是马哈茂德·易卜拉欣（Mahmoud Ibrahim）的建议。我想我会同意的。我更新了你的jsFiddle：我想这可能有用。但是，这两个表有脱离垂直对齐的风险，因为行标题和行内容之间没有链接。它们之间没有实际的联系，但只要表的样式相同，就不会有任何问题。因为每个内容行都有一个标题行，所以它是1 x 1关系。我想我会使用这个事件，如果它不是100%干净的话。我将在实现和测试它的时候向您报告。我将它放在一个JSFIDLE中：我喜欢bevahiour。但是，难道没有一种CSS方法可以做到这一点吗？
hello the css looks like
td {
padding: 6px;
white-space: nowrap;
z-index:1;
}
td:first-child {
width: 100px;
position:fixed;
z-index:-1;
background-color: gray;
}
td:nth-child(2){
width: 100px; // width of first child
}
and your tr will be "<tr><td>RowHeader a0</td>**<td></td>**<td>b0</td><td>c0</td>......"
If it satisfy you please inform me.
<table id="table-header"></table>
<table id="table-items"></table>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX LIBRARY</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="superTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<DIV class=fakeContainer>
<TABLE class=demoTable id=demoTable>
<TBODY>
<TR>
<TH>ID</TH>
<TH>First Name</TH>
<TH>Last Name</TH>
<TH>Age</TH>
<TH>State</TH>
<TH>Email Address</TH>
<TH>Favorite Color</TH>
<TH>Favorite Season</TH></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Jim</TD>
<TD>Neggi</TD>
<TD>25</TD>
<TD>Delhi</TD>
<TD>Jim.Neggi@gmail.com</TD>
<TD>Blue</TD>
<TD>Winter</TD></TR>
<TR>
<TD>ID0001</TD>
<TD>Akriti</TD>
<TD>Sharma</TD>
<TD>28</TD>
<TD>Delhi</TD>
<TD>Akriti.Sharma@rediffmail.com</TD>
<TD>Purple</TD>
<TD>Summer</TD></TR>
</TBODY></TABLE></DIV>
<SCRIPT src="superTables.js"
type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
//<![CDATA[
(function() {
var mySt = new superTable("demoTable", {
cssSkin : "sSky",
fixedCols : 1,
headerRows : 1,
onStart : function () {
this.start = new Date();
},
onFinish : function () {
document.getElementById("testDiv").innerHTML += "Finished...<br>" + ((new Date()) - this.start) + "ms.<br>";
}
});
})();
//]]>
</SCRIPT>
</div>
</body>
</html>
.sBase {
OVERFLOW: hidden; WIDTH: 100%; POSITION: relative; HEIGHT: 100%
}
.sHeader {
Z-INDEX: 3; POSITION: absolute; BACKGROUND-COLOR: #ffffff
}
.sHeaderInner {
POSITION: relative
}
.sHeaderInner TABLE {
TABLE-LAYOUT: fixed! important; WIDTH: 1px! important; BORDER-COLLAPSE: collapse! important; BACKGROUND-COLOR: #ffffff; border-spacing: 0px 0px
}
.sFHeader {
Z-INDEX: 4; OVERFLOW: hidden; POSITION: absolute
}
.sFHeader TABLE {
TABLE-LAYOUT: fixed! important; WIDTH: 1px! important; BORDER-COLLAPSE: collapse! important; BACKGROUND-COLOR: #ffffff; border-spacing: 0px 0px
}
.sData {
Z-INDEX: 2; OVERFLOW: auto; POSITION: absolute; BACKGROUND-COLOR: #ffffff
}
.sData TABLE {
TABLE-LAYOUT: fixed! important; WIDTH: 1px! important; BORDER-COLLAPSE: collapse! important; border-spacing: 0px 0px
}
.sFData {
Z-INDEX: 1; POSITION: absolute; BACKGROUND-COLOR: #ffffff
}
.sFDataInner {
POSITION: relative
}
.sFData TABLE {
TABLE-LAYOUT: fixed! important; WIDTH: 1px! important; BORDER-COLLAPSE: collapse! important; border-spacing: 0px 0px
}
.sDefault {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, sans serif; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.sDefault TH {
BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 1px solid; WHITE-SPACE: nowrap
}
.sDefault TD {
BORDER-RIGHT: #cccccc 0px solid; PADDING-RIGHT: 6px; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; BORDER-LEFT: #cccccc 0px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 0px solid; WHITE-SPACE: nowrap
}
.sDefault TH {
BORDER-LEFT-COLOR: #c5c5c5; BORDER-BOTTOM-COLOR: #c5c5c5; BORDER-TOP-COLOR: #c5c5c5; BACKGROUND-COLOR: #e5e5e5; BORDER-RIGHT-COLOR: #c5c5c5
}
.sDefault-Fixed {
BORDER-LEFT-COLOR: #c5c5c5; BORDER-BOTTOM-COLOR: #c5c5c5; BORDER-TOP-COLOR: #c5c5c5; BACKGROUND-COLOR: #eeeeee; BORDER-RIGHT-COLOR: #c5c5c5
}
.sSky {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, sans serif; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.sSky TH {
BORDER-RIGHT: #89BCCC 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #89BCCC 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; BORDER-LEFT: #89BCCC 0px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #89BCCC 1px solid; WHITE-SPACE: nowrap
}
.sSky TD {
BORDER-RIGHT: #89BCCC 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #89BCCC 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; BORDER-LEFT: #89BCCC 0px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #89BCCC 1px solid; WHITE-SPACE: nowrap
}
.sSky TH {
BACKGROUND-COLOR: #B9D8E2
}
.sSky-Fixed {
BACKGROUND-COLOR: #C8E0E8
}
.sOrange {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, sans serif; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.sOrange TH {
BORDER-RIGHT: #cebb9e 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #cebb9e 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; BORDER-LEFT: #cebb9e 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #cebb9e 1px solid; WHITE-SPACE: nowrap
}
.sOrange TD {
BORDER-RIGHT: #cebb9e 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #cebb9e 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; BORDER-LEFT: #cebb9e 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #cebb9e 1px solid; WHITE-SPACE: nowrap
}
.sOrange TH {
BACKGROUND-COLOR: #ecd8c7
}
.sOrange-Fixed {
BACKGROUND-COLOR: #f7ede4
}
.sDark {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #ffffff; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, sans serif; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.sDark TH {
BORDER-RIGHT: #555555 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #555555 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; BORDER-LEFT: #555555 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #555555 1px solid; WHITE-SPACE: nowrap
}
.sDark TD {
BORDER-RIGHT: #555555 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #555555 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; BORDER-LEFT: #555555 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #555555 1px solid; WHITE-SPACE: nowrap
}
.sDark TH {
BACKGROUND-COLOR: #000000
}
.sDark-Fixed {
BACKGROUND-COLOR: #222222
}
.sDark-Main {
BACKGROUND-COLOR: #333333
}
.fakeContainer {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 20px; OVERFLOW: hidden; WIDTH: 638px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 220px; BORDER-BOTTOM-STYLE: none;
border:1px solid #8DBFCF;}
superTable = function (tableId, options) {
/////* Initialize */
options = options || {};
this.cssSkin = options.cssSkin || "";
this.headerRows = parseInt(options.headerRows || "1");
this.fixedCols = parseInt(options.fixedCols || "0");
this.colWidths = options.colWidths || [];
this.initFunc = options.onStart || null;
this.callbackFunc = options.onFinish || null;
this.initFunc && this.initFunc();
/////* Create the framework dom */
this.sBase = document.createElement("DIV");
this.sFHeader = this.sBase.cloneNode(false);
this.sHeader = this.sBase.cloneNode(false);
this.sHeaderInner = this.sBase.cloneNode(false);
this.sFData = this.sBase.cloneNode(false);
this.sFDataInner = this.sBase.cloneNode(false);
this.sData = this.sBase.cloneNode(false);
this.sColGroup = document.createElement("COLGROUP");
this.sDataTable = document.getElementById(tableId);
this.sDataTable.style.margin = "0px"; /* Otherwise looks bad */
if (this.cssSkin !== "") {
this.sDataTable.className += " " + this.cssSkin;
}
if (this.sDataTable.getElementsByTagName("COLGROUP").length > 0) {
this.sDataTable.removeChild(this.sDataTable.getElementsByTagName("COLGROUP")[0]); /* Making our own */
}
this.sParent = this.sDataTable.parentNode;
this.sParentHeight = this.sParent.offsetHeight;
this.sParentWidth = this.sParent.offsetWidth;
/////* Attach the required classNames */
this.sBase.className = "sBase";
this.sFHeader.className = "sFHeader";
this.sHeader.className = "sHeader";
this.sHeaderInner.className = "sHeaderInner";
this.sFData.className = "sFData";
this.sFDataInner.className = "sFDataInner";
this.sData.className = "sData";
/////* Clone parts of the data table for the new header table */
var alpha, beta, touched, clean, cleanRow, i, j, k, m, n, p;
this.sHeaderTable = this.sDataTable.cloneNode(false);
if (this.sDataTable.tHead) {
alpha = this.sDataTable.tHead;
this.sHeaderTable.appendChild(alpha.cloneNode(false));
beta = this.sHeaderTable.tHead;
} else {
alpha = this.sDataTable.tBodies[0];
this.sHeaderTable.appendChild(alpha.cloneNode(false));
beta = this.sHeaderTable.tBodies[0];
}
alpha = alpha.rows;
for (i=0; i<this.headerRows; i++) {
beta.appendChild(alpha[i].cloneNode(true));
}
this.sHeaderInner.appendChild(this.sHeaderTable);
if (this.fixedCols > 0) {
this.sFHeaderTable = this.sHeaderTable.cloneNode(true);
this.sFHeader.appendChild(this.sFHeaderTable);
this.sFDataTable = this.sDataTable.cloneNode(true);
this.sFDataInner.appendChild(this.sFDataTable);
}
/////* Set up the colGroup */
alpha = this.sDataTable.tBodies[0].rows;
for (i=0, j=alpha.length; i<j; i++) {
clean = true;
for (k=0, m=alpha[i].cells.length; k<m; k++) {
if (alpha[i].cells[k].colSpan !== 1 || alpha[i].cells[k].rowSpan !== 1) {
i += alpha[i].cells[k].rowSpan - 1;
clean = false;
break;
}
}
if (clean === true) break; /* A row with no cells of colSpan > 1 || rowSpan > 1 has been found */
}
cleanRow = (clean === true) ? i : 0; /* Use this row index to calculate the column widths */
for (i=0, j=alpha[cleanRow].cells.length; i<j; i++) {
if (i === this.colWidths.length || this.colWidths[i] === -1) {
this.colWidths[i] = alpha[cleanRow].cells[i].offsetWidth;
}
}
for (i=0, j=this.colWidths.length; i<j; i++) {
this.sColGroup.appendChild(document.createElement("COL"));
this.sColGroup.lastChild.setAttribute("width", this.colWidths[i]);
}
this.sDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sDataTable.firstChild);
this.sHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sHeaderTable.firstChild);
if (this.fixedCols > 0) {
this.sFDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sFDataTable.firstChild);
this.sFHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sFHeaderTable.firstChild);
}
/////* Style the tables individually if applicable */
if (this.cssSkin !== "") {
this.sDataTable.className += " " + this.cssSkin + "-Main";
this.sHeaderTable.className += " " + this.cssSkin + "-Headers";
if (this.fixedCols > 0) {
this.sFDataTable.className += " " + this.cssSkin + "-Fixed";
this.sFHeaderTable.className += " " + this.cssSkin + "-FixedHeaders";
}
}
/////* Throw everything into sBase */
if (this.fixedCols > 0) {
this.sBase.appendChild(this.sFHeader);
}
this.sHeader.appendChild(this.sHeaderInner);
this.sBase.appendChild(this.sHeader);
if (this.fixedCols > 0) {
this.sFData.appendChild(this.sFDataInner);
this.sBase.appendChild(this.sFData);
}
this.sBase.appendChild(this.sData);
this.sParent.insertBefore(this.sBase, this.sDataTable);
this.sData.appendChild(this.sDataTable);
/////* Align the tables */
var sDataStyles, sDataTableStyles;
this.sHeaderHeight = this.sDataTable.tBodies[0].rows[(this.sDataTable.tHead) ? 0 : this.headerRows].offsetTop;
sDataTableStyles = "margin-top: " + (this.sHeaderHeight * -1) + "px;";
sDataStyles = "margin-top: " + this.sHeaderHeight + "px;";
sDataStyles += "height: " + (this.sParentHeight - this.sHeaderHeight) + "px;";
if (this.fixedCols > 0) {
/* A collapsed table's cell's offsetLeft is calculated differently (w/ or w/out border included) across broswers - adjust: */
this.sFHeaderWidth = this.sDataTable.tBodies[0].rows[cleanRow].cells[this.fixedCols].offsetLeft;
if (window.getComputedStyle) {
alpha = document.defaultView;
beta = this.sDataTable.tBodies[0].rows[0].cells[0];
if (navigator.taintEnabled) { /* If not Safari */
this.sFHeaderWidth += Math.ceil(parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width")) / 2);
} else {
this.sFHeaderWidth += parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width"));
}
} else if (/*@cc_on!@*/0) { /* Internet Explorer */
alpha = this.sDataTable.tBodies[0].rows[0].cells[0];
beta = [alpha.currentStyle["borderRightWidth"], alpha.currentStyle["borderLeftWidth"]];
if(/px/i.test(beta[0]) && /px/i.test(beta[1])) {
beta = [parseInt(beta[0]), parseInt(beta[1])].sort();
this.sFHeaderWidth += Math.ceil(parseInt(beta[1]) / 2);
}
}
/* Opera 9.5 issue - a sizeable data table may cause the document scrollbars to appear without this: */
if (window.opera) {
this.sFData.style.height = this.sParentHeight + "px";
}
this.sFHeader.style.width = this.sFHeaderWidth + "px";
sDataTableStyles += "margin-left: " + (this.sFHeaderWidth * -1) + "px;";
sDataStyles += "margin-left: " + this.sFHeaderWidth + "px;";
sDataStyles += "width: " + (this.sParentWidth - this.sFHeaderWidth) + "px;";
} else {
sDataStyles += "width: " + this.sParentWidth + "px;";
}
this.sData.style.cssText = sDataStyles;
this.sDataTable.style.cssText = sDataTableStyles;
/////* Set up table scrolling and IE's onunload event for garbage collection */
(function (st) {
if (st.fixedCols > 0) {
st.sData.onscroll = function () {
st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
st.sFDataInner.style.top = (st.sData.scrollTop * -1) + "px";
};
} else {
st.sData.onscroll = function () {
st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
};
}
if (/*@cc_on!@*/0) { /* Internet Explorer */
window.attachEvent("onunload", function () {
st.sData.onscroll = null;
st = null;
});
}
})(this);
this.callbackFunc && this.callbackFunc();
};