За последние 24 часа нас посетили 18256 программистов и 1675 роботов. Сейчас ищут 1154 программиста ...

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

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

Метки:
  1. Reken

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

    С нами с:
    4 июл 2019
    Сообщения:
    200
    Симпатии:
    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.105
    Симпатии:
    1.243
    Адрес:
    там-сям
    Не мог бы ты поместить свой пример, который работает НЕ так как хочется в https://jsfiddle.net/ ?
    Чтобы мы ничего не додумывали и могли всё попробовать сразу, без лишней черновой работы.
    --- Добавлено ---
    А вообще, может пригодиться селектор TD:nth-child(1)