Шапка в таблице всегда видна при скролинге | freeze header in table | HTML

Search

Programming, development, testing

→

Html & CSS

→

Шапка в таблице всегда видна при скролинге | freeze header in table | HTML

Looked at 2730 times

Шапка в таблице всегда видна при скролинге | freeze header in table | HTML

last updated: 4 January 2022

Скачать пример

freeze_header_in_table.zip ...
размер: 1 kb

Example we look, we test

Исходный код

Файл example.css

#content {
     height: 100%;
     display: flex;
     flex-direction: column;
}

.table-wrapper {
     overflow-y: scroll;
     flex-grow: 1;
}

.table-wrapper th{
     position: sticky;
     top: 0;
}

table {
     border-collapse: collapse;
     width: 100%;
}

th {
     background: #DDD;
}

td,th {
     padding: 10px;
     text-align: center;
}

Файл example.html

<link rel="stylesheet" href="example.css">

<body>

     <div id="content">
          Hello!
          Good!

          <table class="table-wrapper">
               <thead>
                    <tr>
                         <th>Header</th>
                         <th>Header</th>
                         <th>Header</th>
                    </tr>
               </thead>
               <tbody>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
                    <tr>
                         <td>Text</td>
                         <td>Text</td>
                         <td>Text</td>
                    </tr>
               </tbody>
          </table>

          Bye 1<BR>
          Bye 2<BR>
          Bye 3<BR>
          Bye 4<BR>
          Bye 5<BR>
          Bye 6<BR>
          Bye 7<BR>
          Bye 8<BR>
          Bye 1<BR>
          Bye 2<BR>
          Bye 3<BR>
          Bye 4<BR>
          Bye 5<BR>
          Bye 6<BR>
          Bye 7<BR>
          Bye 8<BR>
          Bye 1<BR>
          Bye 2<BR>
          Bye 3<BR>
          Bye 4<BR>
          Bye 5<BR>
          Bye 6<BR>
          Bye 7<BR>
          Bye 8<BR>
          Bye 1<BR>
          Bye 2<BR>
          Bye 3<BR>
          Bye 4<BR>
          Bye 5<BR>
          Bye 6<BR>
          Bye 7<BR>
          Bye 8<BR>
          Bye 1<BR>
          Bye 2<BR>
          Bye 3<BR>
          Bye 4<BR>
          Bye 5<BR>
          Bye 6<BR>
          Bye 7<BR>
          Bye 8<BR>
          Bye 1<BR>
          Bye 2<BR>
          Bye 3<BR>
          Bye 4<BR>
          Bye 5<BR>
          Bye 6<BR>
          Bye 7<BR>
          Bye 8<BR>
          Bye 7<BR>
          Bye 8<BR>
          Bye 1<BR>
          Bye 2<BR>
          Bye 3<BR>
          Bye 4<BR>
          Bye 5<BR>
          Bye 6<BR>
          Bye 7<BR>
          Bye 8<BR>
          Bye 1<BR>
          Bye 2<BR>
          Bye 3<BR>
          Bye 4<BR>
          Bye 5<BR>
          Bye 6<BR>
          Bye 7<BR>
          Bye 8<BR>

     </div>

</body>

← Previous topic
Что такое CSS flex

Next topic →
Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML

Your feedback ... Comments ...

Объявления

Объявления

HTML elements

• HTML tag <a> link to go to another page

• HTML tag <abbr> shows an abbreviated name, if you let the mouse down there will be a pop-up inscription

• HTML tags fieldset and legend. This is a frame with a title

• HTML tag  comment

• style="border" in the HTML

HTML поиск элемента, элементов

• document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)

• yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента

HTML svg (vector graphics for drawing lines, rectangles, ellipses, ...)

• <svg> vector graphics, drawing a line<line>, rectangle <rect>, circle<circle>, text<text>

HTML canvas (drawing pictures, text, shapes)

• HTML <canvas> drawing a rectangle

• HTML <canvas> рисуем линии по нажатию мышкой на Canvas

• HTML <canvas> we draw pictures

• HTML <canvas> we draw a picture with a rotation

• HTML <canvas> draw a picture with horizontal reflection

• HTML <canvas> we draw a picture and text

• HTML <canvas> draw a picture many times in a rectangle (template)

• HTML <canvas> how to get mouse coordinates ? Determine the position of the mouse.

• HTML <canvas> drawing a snake with lines moveTo, lineTo

CSS

• CSS description

• After modifying the file css , the browser displays old styles over and over again. Why?

• Books to study CSS

CSS flex (элемент может растягиваться или сжиматься и таким образом заполнять свободное пространство)

• Что такое CSS flex

Freeze

• Шапка в таблице всегда видна при скролинге | freeze header in table | HTML

• Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML

Do Popup using HTML and Javascript

• How to make a Popup window in a HTML page | Javascript, HTML, CSS

Motion and animation of pictures

• Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

• Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

• Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval

• Drawing a picture with movement and animation (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval

Web страница на телефоне

• Открываю web страницу на телефоне в Google Chrome. Почему при двойном нажатии размер страницы увеличивается?

Верстка, дизайн страницы

• What the Front-end development?

• Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML

• Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS

• How to make your website fit in size on your phone, tablet? (HTML meta with attribute name='viewport')

• Correct layout HTML. Bad to use table. You need to use div

• Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?

• Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS

WWW sites for learning

• Sites to explore HTML

Ваши вопросы присылайте по почте: info@dir.by