水平滚动表格内容，但保留行标题答案

【问题标题】：Scroll table-content horizontally but keep the row-headers in place水平滚动表格内容，但保留行标题
【发布时间】：2013-06-11 23:36:18
【问题描述】：

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

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

我不知道如何做到这一点。简单地将行标题 (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;
}

【问题讨论】：

标签： css scroll html-table row horizontal-scrolling

【解决方案1】：

您的解决方案在这里..

Table.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>

superTables.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();
            };

【讨论】：

我把它放在一个 jsFiddle 中：jsfiddle.net/GYZWE 我喜欢这种行为。但是没有 CSS 方法可以做到吗？

【解决方案2】：

你可以创建两个表

1- 一个将保存行标题

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

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

这是jsfiddle

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

【讨论】：

我更新了你的 jsFiddle：jsfiddle.net/fVtyD/3 我认为这可能有效。但是这两个表存在垂直对齐的风险，因为行标题和行内容之间没有链接。
嗯，你是对的。它们之间没有实际的联系，但是只要表格的样式相同，您就不会遇到任何问题。因为每个内容行都有一个标题行，所以它是 1 x 1 关系。
如果不是 100% 干净，我想我会同意的。我会在实施和测试后向您报告。

【解决方案3】：

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.

【讨论】：

我很害怕，但这不起作用。正如我在帖子中提到的，通过将行标题设置为 position:fixed，垂直滚动将不再起作用。
对不起，这是我的错，我忽略了那部分。而且我认为这是不可能的 widthout js 或那种东西!!!
为简单起见，您可以将整个表格分成两部分。第一个用于行标题，第二个用于其他行，然后应用所需的 js。一旦我应用此过程来制作类似行为的 Excel 表格。
css 可以做到。然后您必须拆分表格；或保留您的原始表格添加另一个表格，如 .....

RowHeader a0
RowHeader a9

然后将两个表放入另一个表/s 或 div/s 并相应地使您的 css 溢出-x/y 以使一个稳定而另一个水平滚动。垂直滚动将保留。请注意，在这种情况下，将根据您的 css 设置为 div 或表格显示滚动条。
这就是 Mahmoud Ibrahim 的建议。我想我会同意的。