За последние 24 часа нас посетили 20042 программиста и 1130 роботов. Сейчас ищут 508 программистов ...

Зафиксировать столбик

Тема в разделе "HTML и CSS", создана пользователем Reken, 21 фев 2022.

Метки:
  1. Reken

    Reken Активный пользователь

    С нами с:
    4 июл 2019
    Сообщения:
    198
    Симпатии:
    5
    Подскажите пожалуйста. Есть следующая верстка:
    Код (Text):
    1. <html>
    2. <head>
    3.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    4.   <title>Таблицы</title>
    5.   <style type="text/css">
    6.    TABLE {
    7.     background: maroon; /* Цвет фона таблицы */
    8.     color: white; /* Цвет текста */
    9.    }
    10.    TH {
    11.     background: maroon;
    12.     position: sticky;
    13.     top: 0;
    14.     z-index: 2;
    15.    }
    16.  
    17.  
    18.    TD {
    19.     background: navy; /* Цвет фона ячеек */
    20.    }
    21.   </style>
    22. </head>
    23. <body>
    24.   <table cellpadding="4" cellspacing="1">
    25.    <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
    26.    <tr><td>Ячейка 3</td><td>Ячейка 4</td>></tr>
    27.   </table>
    28. </body>
    29. </html>
    Как понятно из верстки, при использовании тега TH будет фиксироваться строчка при прокрутке. На первой строчке это работает, но если нужно зафиксировать первый столбик, то не работает. Столбик прокручивается...Как зафиксировать первый столбик?
     
  2. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.066
    Симпатии:
    1.230
    Адрес:
    там-сям
    Не мог бы ты поместить свой пример, который работает НЕ так как хочется в https://jsfiddle.net/ ?
    Чтобы мы ничего не додумывали и могли всё попробовать сразу, без лишней черновой работы.
    --- Добавлено ---
    А вообще, может пригодиться селектор TD:nth-child(1)