Css зафиксировать шапку таблицы – Подскажите как зафиксировать шапку таблицы, чтобы при прокрутке зафиксировано было только тело. как это реализовать на CSS HTML

Leave a Comment / Css / By /

css — Как зафиксировать заголовок таблицы при прокрутке?

Есть таблица в контейнере с жёстко заданной высотой. При большом количестве строк в таблице у окружающего блока появляется полоса прокрутки. Однако имеется проблема — заголовок таблицы уезжает наверх, и его не видно. Как зафиксировать его, чтобы он всегда был виден наверху блока?

Я пытался назначить ему вот такие CSS свойства, но видимого результата нет.

thead {
  position: sticky;
  top: 0px;
}

Какие есть способы решения проблемы? Желательно обойтись без разбиения таблицы не две, т.к. в таком случае могут разойтись столбцы.

Для удобства вот пример моей вёрстки.

.container {
  height: 300px;
  width: 500px;
  margin: auto;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
}
thead {
  position: sticky;
  top: 0px;
}
th, td {
  border: 1px solid black;
}
<div>
  <table>
    <thead>
      <tr>
        <th>Заголовок1</th>
        <th>Заголовок2</th>
        <th>Заголовок3</th>
        <th>Заголовок4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
      <tr>
        <td>abc</td>
        <td>defghijklmnopqrs</td>
        <td>tuv</td>
        <td>wxyz</td>
      </tr>
    </tbody>
  </table>
</div>

Как прикрепить заголовок таблицы (thead) сверху при прокрутке строк таблицы с фиксированным заголовк

This can now be done without JS, just pure CSS. So, anyone trying to do this for modern browsers should look into using position: sticky instead.

Currently, both Edge and Chrome have a bug where position: sticky doesn’t work on thead or tr elements, however it’s possible to use it on th elements, so all you need to do is just add this to your code:

th {
  position: sticky;
  top: 50px;  /* 0px if you don't have a navbar, but something is required */
  background: white;
}

Note: you’ll need a background color for them, or you’ll be able to see through the sticky title bar.

This has very good browser support.

Demo with your code (HTML unaltered, above 5 lines of CSS added, all JS removed):

body {
    padding-top:50px;
}
table.floatThead-table {
    border-top: none;
    border-bottom: none;
    background-color: #fff;
}

th {
  position: sticky;
  top: 50px;
  background: white;
}
 
 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Fixed navbar -->
<div>
    <div>
        <div>
            <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span>
 <span></span>
 <span></span>

            </button> <a href="#">Project name</a>

        </div>
        <div>
            <ul>
                <li><a href="#">Home</a>

                </li>
                <li><a href="#about">About</a>

                </li>
                <li><a href="#contact">Contact</a>

                </li>
                <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a>

                    <ul>
                        <li><a href="#">Action</a>

                        </li>
                        <li><a href="#">Another action</a>

                        </li>
                        <li><a href="#">Something else here</a>

                        </li>
                        <li></li>
                        <li>Nav header</li>
                        <li><a href="#">Separated link</a>

                        </li>
                        <li><a href="#">One more separated link</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>
<!-- Begin page content -->
<div>
    <div>
         <h2>Sticky Table Headers</h2>

    </div>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
    <p>If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
     <h4>Table 2</h4>

    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>New Table</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
Автор: Okku Размещён: 24.08.2018 04:19

css — Bootstrap 4 Как сделать заголовок таблицы фиксированный при прокрутке?

Я использую Bootstrap V4 alpha 6вместе с , Angular 5чтобы создать таблицу с фиксированным заголовком при прокрутке , однако я не могу заставить его работать.

Примечание: Navbar является fixed-top

Вещи, которые я пробовал

1) Добавить fixed-topклассthead

2)

thead {
  position: sticky;
  top: 0;
}

3)

thead {
  display:block;
}

4) Много CSS, но ничего не работает, так как таблица реагирует и прокручивать и есть несколько строк заголовка

Что я делаю не так?

<nav class=navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse>
<button class=navbar-toggler navbar-toggler-right type=button data-toggle=collapse
    data-target=#navbarsExampleDefault aria-controls=navbarsExampleDefault aria-expanded=false
    aria-label=Toggle navigation>
<span class=navbar-toggler-icon></span>
</button>
<a class=navbar-brand href=#>
<img src=./assets/logo.png width=200 height=40 class=d-inline-block align-top alt=>
</a>
</nav>
<table class=table table-responsive w-100 d-block d-md-table table-bordered table-striped table-fixed>
<thead class=sticky-top>
<tr>
  <th colspan=16 class=text-center>PROJECT 1</th>
</tr>
<tr>
  <th rowspan=2>WON</th>
  <th rowspan=2>LST #</th>
  <th rowspan=2>FLR #</th>
  <th colspan=3>GLS</th>
  <th colspan=7>FRMS</th>
  <th rowspan=2>Scheduled Date</th>
  <th rowspan=2>Cmplt Date</th>
</tr>
<tr>
  <th>G Reqd</th>
  <th colspan=2>G Rcvd (%)</th>
  <th>Frms Reqd</th>
  <th colspan=2>Frms Ass (%)</th>
  <th colspan=2>Frms Line (%)</th>
  <th colspan=2>Frms Cmplt (%)</th>
</tr>
</thead>

<tbody>
<tr *ngFor=let project of projectData>
  <td>`project`.`ordernumber`</td>
  <td>`project`.`ListNumber`</td>
  <td>`project`.`floorID`</td>
    <td>`project`.`glassRequired`</td>
    <td>`project`.`glassReceived`</td>
    <td>`project`.`glassReceivedPercent`</td>
  <td>`project`.`framesRequired`</td>
  <td>`project`.`framesAssembled`</td>
  <td>`project`.`framesAssembledPercent`%</td>
  <td>`project`.`framesGlazed`</td>
  <td>`project`.`framesGlazedPercent`%</td>
  <td>`project`.`framesShipped`</td>
  <td>`project`.`framesShippedPercent`%</td>
  <td>`project`.`deliverydate`</td>
 <td>Not Shipped Yet</td>
</tr>
</tbody>
</table>

Я также создал plnkr

Как закрепить шапку сайта при скролле

как закрепить шапку сайтаВсем привет. Сегодня посмотрел статистику поисковых запросов, по которым люди переходят на блог и обнаружил, что есть несколько совсем не релевантных. Нет, не блогу, а статьям.

Один из них как зафиксировать шапку сайта? Я тут же решил исправить положение и написать статью, так как тема актуальная, и есть вопросы в данной области.

Вообще, существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу, зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно «малой кровью» 🙂

На самом деле, метод фиксации элемента при прокрутке страницы очень простой, и вы удивитесь, как просто решается данная проблема.

Фиксация шапки при прокрутке страницы

Для того, чтобы зафиксировать шапку, придется создать два блока. Один — для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…


<div>
 <div>
 </div>
</div>

Вот такая простая html структура! Теперь добавим стили!

#headerMain {
  width:920px;
  height: 195px;
  margin:0px auto;
  z-index:0;
}

#header {
  width:920px;
  height: 195px;
  background: url(../img/bg-header.jpg) no-repeat;
  position: fixed;
  z-index: 9999;
}

Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.

Скачать исходник

Вот такая маленькая статья получилась сегодня. Если будут вопросы – пишите их в комментариях. Постараюсь помочь. До встречи на смартлендинг

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *