css - 水平滚动表格内容但保留行标题

Question

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

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

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

Answer 1

可以创建两个表

1- 将包含行标题的

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

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

这是一个jsfiddle

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