StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POScroll table-content horizontally but keep the row-headers in place
primarykey
Id
17123406
data
AcceptedAnswerId
17123699
AnswerCount
3
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-06-15T11:58:23.227
FavoriteCount
0
LastActivityDate
2017-11-25T10:26:48.873
LastEditDate
2017-11-25T10:26:48.873
LastEditorUserId
4370109
OwnerUserId
2033412
ParentId
0
PostTypeId
1
Score
-1
ViewCount
2330
LastEditorDisplayName
text
Body
<p>I'd like to create a table with row-headers. This table will most likely have too many columns to fit the screen (especially on mobile devices). As is has even more rows I can't swap rows and columns.</p> <p>I guess the perfect solution for this would be row-headers that stay in place while scrolling the other cells horizontally.</p> <p>I have no idea how to accomplish this. Simply setting the row-headers (td:first-child) to position:fixed doesn't work because scrolling vertically brings the row-headers and their rows out of alignment.</p> <p>I created a little jsFiddle to experiment with: <a href="http://jsfiddle.net/uRu7g/" rel="nofollow noreferrer">http://jsfiddle.net/uRu7g/</a></p> <pre><code><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; } </code></pre>
Tags
<css><scroll><html-table><row><horizontal-scrolling>
Title
Scroll table-content horizontally but keep the row-headers in place
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USuser2033412
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POScroll table-content horizontally but keep the row-headers in place
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTDownMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.