-1

我想创建一个带有行标题的表。此表很可能包含太多列以适应屏幕（尤其是在移动设备上）。因为有更多行，我无法交换行和列。

我想这个问题的完美解决方案是在水平滚动其他单元格时保持原位的行标题。

我不知道如何做到这一点。简单地将行标题 (td:first-child) 设置为 position:fixed 不起作用，因为垂直滚动会使行标题及其行不对齐。

我创建了一个小 jsFiddle 来试验：http: //jsfiddle.net/uRu7g/

<table><tbody>
    <tr><td>RowHeader a0</td><td>b0</td><td>c0</td><td>d0</td><td>e0</td><td>f0</td><td>g0</td><td>h0</td><td>i0</td><td>j0</td><td>k0</td><td>l0</td><td>m0</td><td>n0</td><td>o0</td><td>p0</td><td>q0</td><td>r0</td><td>s0</td><td>t0</td><td>u0</td><td>v0</td><td>w0</td><td>x0</td><td>y0</td><td>z0</td></tr>
    <tr><td>RowHeader a1</td><td>b1</td><td>c1</td><td>d1</td><td>e1</td><td>f1</td><td>g1</td><td>h1</td><td>i1</td><td>j1</td><td>k1</td><td>l1</td><td>m1</td><td>n1</td><td>o1</td><td>p1</td><td>q1</td><td>r1</td><td>s1</td><td>t1</td><td>u1</td><td>v1</td><td>w1</td><td>x1</td><td>y1</td><td>z1</td></tr>
    <tr><td>RowHeader a2</td><td>b2</td><td>c2</td><td>d2</td><td>e2</td><td>f2</td><td>g2</td><td>h2</td><td>i2</td><td>j2</td><td>k2</td><td>l2</td><td>m2</td><td>n2</td><td>o2</td><td>p2</td><td>q2</td><td>r2</td><td>s2</td><td>t2</td><td>u2</td><td>v2</td><td>w2</td><td>x2</td><td>y2</td><td>z2</td></tr>
    <tr><td>RowHeader a3</td><td>b3</td><td>c3</td><td>d3</td><td>e3</td><td>f3</td><td>g3</td><td>h3</td><td>i3</td><td>j3</td><td>k3</td><td>l3</td><td>m3</td><td>n3</td><td>o3</td><td>p3</td><td>q3</td><td>r3</td><td>s3</td><td>t3</td><td>u3</td><td>v3</td><td>w3</td><td>x3</td><td>y3</td><td>z3</td></tr>
    <tr><td>RowHeader a4</td><td>b4</td><td>c4</td><td>d4</td><td>e4</td><td>f4</td><td>g4</td><td>h4</td><td>i4</td><td>j4</td><td>k4</td><td>l4</td><td>m4</td><td>n4</td><td>o4</td><td>p4</td><td>q4</td><td>r4</td><td>s4</td><td>t4</td><td>u4</td><td>v4</td><td>w4</td><td>x4</td><td>y4</td><td>z4</td></tr>
    <tr><td>RowHeader a5</td><td>b5</td><td>c5</td><td>d5</td><td>e5</td><td>f5</td><td>g5</td><td>h5</td><td>i5</td><td>j5</td><td>k5</td><td>l5</td><td>m5</td><td>n5</td><td>o5</td><td>p5</td><td>q5</td><td>r5</td><td>s5</td><td>t5</td><td>u5</td><td>v5</td><td>w5</td><td>x5</td><td>y5</td><td>z5</td></tr>
    <tr><td>RowHeader a6</td><td>b6</td><td>c6</td><td>d6</td><td>e6</td><td>f6</td><td>g6</td><td>h6</td><td>i6</td><td>j6</td><td>k6</td><td>l6</td><td>m6</td><td>n6</td><td>o6</td><td>p6</td><td>q6</td><td>r6</td><td>s6</td><td>t6</td><td>u6</td><td>v6</td><td>w6</td><td>x6</td><td>y6</td><td>z6</td></tr>
    <tr><td>RowHeader a7</td><td>b7</td><td>c7</td><td>d7</td><td>e7</td><td>f7</td><td>g7</td><td>h7</td><td>i7</td><td>j7</td><td>k7</td><td>l7</td><td>m7</td><td>n7</td><td>o7</td><td>p7</td><td>q7</td><td>r7</td><td>s7</td><td>t7</td><td>u7</td><td>v7</td><td>w7</td><td>x7</td><td>y7</td><td>z7</td></tr>
    <tr><td>RowHeader a8</td><td>b8</td><td>c8</td><td>d8</td><td>e8</td><td>f8</td><td>g8</td><td>h8</td><td>i8</td><td>j8</td><td>k8</td><td>l8</td><td>m8</td><td>n8</td><td>o8</td><td>p8</td><td>q8</td><td>r8</td><td>s8</td><td>t8</td><td>u8</td><td>v8</td><td>w8</td><td>x8</td><td>y8</td><td>z8</td></tr>
    <tr><td>RowHeader a9</td><td>b9</td><td>c9</td><td>d9</td><td>e9</td><td>f9</td><td>g9</td><td>h9</td><td>i9</td><td>j9</td><td>k9</td><td>l9</td><td>m9</td><td>n9</td><td>o9</td><td>p9</td><td>q9</td><td>r9</td><td>s9</td><td>t9</td><td>u9</td><td>v9</td><td>w9</td><td>x9</td><td>y9</td><td>z9</td></tr>
</tbody></table>



body {
    font-family: sans-serif;
    text-transform: uppercase;
}
td {
    padding: 6px;
    white-space: nowrap;
}
td:first-child {
    width: 100px;
    background-color: gray;
}
4

3 回答 3

1

你的解决方案在这里..

表.html

<!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>

超级表.css

 .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;}

superTables.js

     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();
            };
于 2013-06-15T12:53:56.533 回答
1

您可以创建两个表

1- 一个将保存行标题

2-将包含您的数据并且可以滚动的那个。

<table id="table-header"></table>
<table id="table-items"></table>

这是一个jsfiddle

不是：我没有删除第二个表中的行标题。

于 2013-06-15T12:35:02.660 回答
0 
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.
于 2013-06-15T12:24:14.637 回答