Прокрутите содержимое таблицы по горизонтали, но оставьте заголовки строк на месте. ⇐ CSS

[Anonymous]

Я хотел бы создать таблицу с заголовками строк. В этой таблице, скорее всего, будет слишком много столбцов, чтобы поместиться на экране (особенно на мобильных устройствах). Поскольку строк еще больше, я не могу менять местами строки и столбцы.

Думаю, идеальным решением для этого были бы заголовки строк, которые остаются на месте при прокрутке другой строки. ячейки горизонтально.

Я понятия не имею, как это сделать. Простая установка заголовков строк (td:first-child) в положение:fixed не работает, поскольку вертикальная прокрутка приводит к нарушению выравнивания заголовков строк и их строк.

Я создал небольшой jsFiddle для экспериментов: h t t p : / / j s f i d d l e . n e t / u R u 7 g / < / p > < b r / > < b r / > < c o d e > & l t ; t a b l e & g t ; & l t ; t b o d y & g t ; < b r / > & l t ; t r & g t ; & l t ; t d & g t ; R o w H e a d e r a 0 & l t ; / t d & g t ; & l t ; t d & g t ; b 0 & l t ; / t d & g t ; & l t ; t d & g t ; c 0 & l t ; / t d & g t ; & l t ; t d & g t ; d 0 & l t ; / t d & g t ; & l t ; t d & g t ; e 0 & l t ; / t d & g t ; & l t ; t d & g t ; f 0 & l t ; / t d & g t ; & l t ; t d & g t ; g 0 & l t ; / t d & g t ; & l t ; t d & g t ; h 0 & l t ; / t d & g t ; & l t ; t d & g t ; i 0 & l t ; / t d & g t ; & l t ; t d & g t ; j 0 & l t ; / t d & g t ; & l t ; t d & g t ; k 0 & l t ; / t d & g t ; & l t ; t d & g t ; l 0 & l t ; / t d & g t ; & l t ; t d & g t ; m 0 & l t ; / t d & g t ; & l t ; t d & g t ; n 0 & l t ; / t d & g t ; & l t ; t d & g t ; o 0 & l t ; / t d & g t ; & l t ; t d & g t ; p 0 & l t ; / t d & g t ; & l t ; t d & g t ; q 0 & l t ; / t d & g t ; & l t ; t d & g t ; r 0 & l t ; / t d & g t ; & l t ; t d & g t ; s 0 & l t ; / t d & g t ; & l t ; t d & g t ; t 0 & l t ; / t d & g t ; & l t ; t d & g t ; u 0 & l t ; / t d & g t ; & l t ; t d & g t ; v 0 & l t ; / t d & g t ; & l t ; t d & g t ; w 0 & l t ; / t d & g t ; & l t ; t d & g t ; x 0 & l t ; / t d & g t ; & l t ; t d & g t ; y 0 & l t ; / t d & g t ; & l t ; t d & g t ; z 0 & l t ; / t d & g t ; & l t ; / t r & g t ; < b r / > & l t ; t r & g t ; & l t ; t d & g t ; R o w H e a d e r a 1 & l t ; / t d & g t ; & l t ; t d & g t ; b 1 & l t ; / t d & g t ; & l t ; t d & g t ; c 1 & l t ; / t d & g t ; & l t ; t d & g t ; d 1 & l t ; / t d & g t ; & l t ; t d & g t ; e 1 & l t ; / t d & g t ; & l t ; t d & g t ; f 1 & l t ; / t d & g t ; & l t ; t d & g t ; g 1 & l t ; / t d & g t ; & l t ; t d & g t ; h 1 & l t ; / t d & g t ; & l t ; t d & g t ; i 1 & l t ; / t d & g t ; & l t ; t d & g t ; j 1 & l t ; / t d & g t ; & l t ; t d & g t ; k 1 & l t ; / t d & g t ; & l t ; t d & g t ; l 1 & l t ; / t d & g t ; & l t ; t d & g t ; m 1 & l t ; / t d & g t ; & l t ; t d & g t ; n 1 & l t ; / t d & g t ; & l t ; t d & g t ; o 1 & l t ; / t d & g t ; & l t ; t d & g t ; p 1 & l t ; / t d & g t ; & l t ; t d & g t ; q 1 & l t ; / t d & g t ; & l t ; t d & g t ; r 1 & l t ; / t d & g t ; & l t ; t d & g t ; s 1 & l t ; / t d & g t ; & l t ; t d & g t ; t 1 & l t ; / t d & g t ; & l t ; t d & g t ; u 1 & l t ; / t d & g t ; & l t ; t d & g t ; v 1 & l t ; / t d & g t ; & l t ; t d & g t ; w 1 & l t ; / t d & g t ; & l t ; t d & g t ; x 1 & l t ; / t d & g t ; & l t ; t d & g t ; y 1 & l t ; / t d & g t ; & l t ; t d & g t ; z 1 & l t ; / t d & g t ; & l t ; / t r & g t ; < b r / > & l t ; t r & g t ; & l t ; t d & g t ; R o w H e a d e r a 2 & l t ; / t d & g t ; & l t ; t d & g t ; b 2 & l t ; / t d & g t ; & l t ; t d & g t ; c 2 & l t ; / t d & g t ; & l t ; t d & g t ; d 2 & l t ; / t d & g t ; & l t ; t d & g t ; e 2 & l t ; / t d & g t ; & l t ; t d & g t ; f 2 & l t ; / t d & g t ; & l t ; t d & g t ; g 2 & l t ; / t d & g t ; & l t ; t d & g t;h2i2j2k2l2m2n2o2p2q2r2s2t2u2v2w2x2y2z2
RowHeader a3b3c3d3e3f3g3h3i3j3k3l3m3n3o3p3q3r3s3t3u3v3w3x3y3z3
RowHeader a4b4c4d4e4f4g4h4i4j4k4l4m4n4o4p4q4r4s4t4u4v4w4x4y4z4
RowHeader a5b5c5d5e5f5g5h5i5j5k5l5m5n5o5p5q5r5s5t5u5v5w5x5y5z5
RowHeader a6b6c6d6e6f6g6h6i6j6k6l6m6n6o6p6q6r6s6t6u6v6w6x6y6z6
RowHeader a7b7c7d7e7f7g7h7i7j7k7l7m7n7o7p7q7r7s7t7u7v7w7x7y7z7
RowHeader a8b8c8d8e8f8g8h8i8j8k8l8m8n8o8p8q8r8s8t8u8v8w8x8y8z8
RowHeader a9b9c9d9e9f9g9h9i9j9k9l9m9n9o9p9q9r9s9t9u9v9w9x9y9z9


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


Подробнее здесь: https://stackoverflow.com/questions/171 ... s-in-place