Разное

Css зафиксировать шапку таблицы при прокрутке: Липкая шапка таблицы на CSS — Веб-стандарты

29.06.2023

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

Вопрос задан

Изменён 1 год 2 месяца назад

Просмотрен 17k раза

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

Я пытался назначить ему вот такие 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>
  • css
  • вёрстка

К сожалению, сейчас position: sticky практически нигде не поддерживается, поэтому данный ответ не очень полезный 🙁

Судя по этому ответу на enSO из-за бага в Chrome, свойство position: sticky нужно присваивать не заголовку таблицы (thead), а ячейкам этого заголовка (th).

Ну и ещё стоит добавить к ним белый фон. Примерно так:

thead th {
  position: sticky;
  top: 0;
  background: white;
}

Сниппет:

.container {
  height: 300px;
  width: 500px;
  margin: auto;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
}
thead th {
  position: sticky;
  top: 0;
  background: white;
}
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>

3

Можете попробовать, такое решение, только придется фиксировать ширину колонк таблицы.

table {
  width: 500px;
  border-collapse: collapse;
 } 
 
 
table td:nth-child(1), 
table th:nth-child(1) { min-width: 150px; text-align: left }
 
table td:nth-child(2),
table th:nth-child(2) { min-width: 150px; text-align: left}
 
table td:nth-child(3),
table th:nth-child(3) { min-width: 100px; text-align: left}

table td:nth-child(4),
table th:nth-child(4) { width: 100px; text-align: left}

table  thead {
    background-color: #333;
    color: #FDFDFD;   
  }
  
table thead tr {
      display: block;
      position: relative;
}

table tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 300px;   
}

table tbody tr:nth-child(even) {
      background-color: #DDD;
}
<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>

2022 год: в chrome и firefox работает простое css

th {
  position: -webkit-sticky;
  position: sticky;
  top: -3px; // при нуле в chrome остаётся странный зазор
  z-index: 2;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Фиксация шапки таблицы

Вопрос задан

Изменён 6 лет 1 месяц назад

Просмотрен 5k раз

Есть таблица (пример):

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>Имя</td>
      <td>Фамилия</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
</table>

Шапка теряет свою ширину относительно последующих строк. Можно как то сделать, чтобы ширина не изменялась?

  • html
  • css

2

Зафиксировать можно только блочный элемент (на table не действует так как хотелось бы). position: fixed; означает, что блок позиционируется относительно экрана.

Можно что-то такого попробовать, если очень нужно:

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>Имя</td>
      <td>Фамилия</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
    <tr>
      <td>Иван 1</td>
      <td>иванов 1</td>
    </tr>
</table>

Рабочий вариант:

<section>
  <div>
    <table>
      <thead>
        <tr>
          <th>
            <div>Имя</div>
          </th>
          <th>
            <div>Фамилия</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

и

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
. container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}

Пример https://jsfiddle.net/h0qp3efw/

html, body{
  margin:0;
  padding:0;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #555;
  width:90%;
}

.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #888;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шапка таблицы</title>
<meta name="description" content="Test">
<meta name="Robots" content="NOINDEX, NOFOLLOW">
<link rel="stylesheet" href="i. css" type="text/css">
</head>
<body>
<h3>Шапка таблицы</h3>
<section>
  <div>
    <table>
      <thead>
        <tr>
          <th><div>Имя</div></th><th><div>Фамилия</div></th><th><div>Отчество 1</div></th><th><div>Отч09876</div></th><th><div>Отч56789</div></th><th><div>Отч2345</div></th><th><div>Отч 3</div></th><th><div>Отчество 4</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>3</td>
          <td>2</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
        <tr>
          <td>Иван 1</td>
          <td>иванов 1</td>
          <td>иванов 1</td>
          <td>2</td>
          <td>3</td>
          <td>1</td>
          <td>иванов 1</td>
          <td>иванов иванов иванов иванов</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
</body>
</html>

На реальной таблице «шапку» срывает

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как создать таблицу с фиксированным заголовком и прокручиваемым телом

В этом руководстве вы найдете несколько методов создания HTML-таблицы с фиксированным заголовком и прокручиваемым телом. Конечно, вам нужно использовать CSS.

Такого результата можно добиться, установив для свойства position значение «sticky» и указав 0 в качестве значения свойства top для элемента.

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

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

Пример создания таблицы с прокручиваемым телом с использованием свойства position: 

 

  <голова>
    Название документа
    <стиль>
      .tableFixHead {
        переполнение-у: авто; /* сделать таблицу прокручиваемой, если высота больше 200 пикселей */
        высота: 200 пикселей; /* задает начальную высоту таблицы 200 пикселей */
      }
      .tableFixHead thead th {
        положение: липкое; /* делаем заголовки таблицы липкими */
        верх: 0px; /* головка стола будет размещена сверху стола и прилипнет к нему */
      }
      стол {
        граница коллапса: коллапс; /* складываем границы таблицы друг к другу */
        ширина: 100%;
      }
      й,
      тд {
        отступ: 8px 16px;
        граница: 1px сплошная #ccc;
      }
      й {
        фон: #еее;
      }
    
  
  <тело>
    <дел>
      <таблица>
        
          
            Столбец 1
            Столбец 2
          
        
        
          
            1. 1
            <тд>2.1
          
          
            1.2
            2.2
          
          
            1.3
            2.3
          
          
            1.4
            2.4
          
          
            1,5
            2.5
          
          
            1.6
            2.5
          
          
            1.7
            2.5
          
          
            1.8
            2.5

Попробуй сам »

Результат

Кол. 1 Кол 2
1.1 2.1
1,2 2,2
1,3 2,3
1,4 2,4
1,5 2,5
1,6 2,5
1,7 2,5
1,8 2,5

Отлично! Хм? Но давайте посмотрим правде в глаза! Мне не нравится видеть эту полосу прокрутки, начинающуюся с заголовка таблицы!

Итак, давайте перейдем к следующему примеру и вместе решим эту проблему!

Еще один метод создания таблицы с фиксированным заголовком и прокручиваемым телом. В приведенном ниже примере мы устанавливаем отображение на «блок» для элемента, чтобы можно было применить свойства высоты и переполнения.

Пример создания таблицы с прокручиваемым телом с использованием свойства display: 

 

  <голова>
    Название документа
    <стиль>
      .fixed_header {
        ширина: 400 пикселей;
        макет таблицы: фиксированный;
        граница коллапса: коллапс;
      }
      .fixed_header тело {
        дисплей: блок;
        ширина: 100%;
        переполнение: авто;
        высота: 100 пикселей;
      }
      .fixed_header thead tr {
        дисплей: блок;
      }
      .fixed_headerобъявление {
        фон: черный;
        цвет: #fff;
      }
      .fixed_header-й,
      .fixed_header тд {
        отступ: 5px;
        выравнивание текста: по левому краю;
        ширина: 200 пикселей;
      }
    
  
  <тело>
    <таблица>
      
        
          Столбец 1
          Столбец 2
          Столбец 3
          Столбец 4
          Столбец 5
        
      
      
        
          <тд>1
          2
          <тд>3
          <тд>4
          <тд>5
        
        
          <тд>6
          <тд>7
          8
          <тд>9
          <тд>10
        
        
          11
          12
          <тд>13
          14
          15
        
        
          16
          17
          18
          19
          20
        
        
          <тд>21
          22
          <тд>23
          <тд>24
          25

Попробуй сам »

Как упоминалось ранее, мы использовали overflow: auto для tbody вместе с display: block.

Вот наш результат, наслаждайтесь разницей!

Как вы заметили, в предыдущих примерах мы не использовали рамки. Однако, если вам нужно добавить границы, вы можете просто использовать свойство границы для всех тегов td.

 .fixed_header тд {
  граница: 1px сплошная #797878;
}

Вот результат.

Надеюсь, вам понравилось!

Фиксированные заголовки таблиц с использованием чистого CSS: залипание при прокрутке

Стандартные HTML-таблицы не очень сложны и, как правило, в этом нет необходимости. Однако может возникнуть ситуация, когда у вас есть большие объемы данных или очень мало места для отображения данных.

В этих случаях фиксированные заголовки таблиц, которые прилипают к прокрутке, могут быть идеальным решением! К счастью, есть несколько простых и полезных способов сделать это с помощью чистого CSS. В этой статье мы рассмотрим применение фиксированных заголовков и боковых панелей к вашим таблицам на примерах.

Данные таблицы

Во-первых, мы начнем с создания некоторых данных таблицы, которые мы можем отобразить на экране. Мы будем использовать довольно большой объем данных, чтобы проиллюстрировать использование прикрепленного заголовка:

 







 































    
  Artist  Album   Песня  Дата  
     
 Б.Б. Кинг  Совершенно хорошо  Острые ощущения ушли  1969  
  
  Фредди Король  Готовимся... (Мир)  Вниз  1971  
  
  Группа Allman Brothers  Группа Allman Brothers  Больше никаких проблем  1969  
  
  Джими Хендрикс  Вы опытны  Purple Haze  1967  
  
  Приятель  Я шел по лесу  Сумасшедший камень 
 		1986

Фиксированные заголовки таблиц на уровне страницы

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

Этого легко добиться всего несколькими строками кода CSS:

 th { 
 position: sticky; 
 позиция: -webkit-sticky; 
 сверху: 0px; 
 z-индекс: 2; 
 }

Исполнитель Альбом Песня Дата
Би Би Кинг Полностью здоров Острые ощущения ушли 1969
Фредди Кинг Подготовка… (Мир) Спуск 1971
Allman Brothers Band The Allman Brothers Band Больше никаких проблем 1969
Джими Хендрикс Опытен ли ты Фиолетовый Дымка 1967
Приятель Я гулял по лесу Безумный камень 1986

При прокрутке вверх и вниз по странице вы заметите поведение столбца таблицы заголовки отличаются, так как части таблицы начинают выпадать из поля зрения. Это гарантирует, что независимо от того, какую часть данных вы просматриваете, у вас всегда будут индикаторы заголовков для ссылки и идентификации каждого из столбцов.

Значение свойства top , равное 0px , гарантирует, что заголовок таблицы всегда остается в самом верху видимой области, а значение z-index , равное 2 , гарантирует, что заголовок таблицы всегда остается слоем выше его данные, чтобы он всегда был виден и никогда не закрывался.

Фиксированные заголовки строк

По умолчанию веб-браузер предполагает, что рассматриваемые фиксированные элементы будут заголовками столбцов таблицы. Как и в случае с фиксированными заголовками столбцов, вы также можете создавать фиксированные заголовки строк, добавляя в поле область действия селектор:

 th[scope="row"] { 
 position: sticky; 
 позиция: -webkit-sticky; 
 слева: 0px; 
 z-индекс: 2; 
 }

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

 







 
































    
  Artist   Альбом  Песня  Дата выпуска  
     
  B. B. Кинг  Совершенно хорошо  Острые ощущения ушли  1969  
  
  Фредди Король  Готовимся... (Мир)  Вниз  1971  
  
  Группа Allman Brothers  The Allman Brothers Band  Больше никаких проблем  1969  
  
  Джими Хендрикс  Are You Experience  Purple Haze  1967  
  
  Buddy Guy  Я шел по лесу  Безумный камень  1986

90 029 900 33 1967
Исполнитель Альбом Песня Дата выпуска
Би Би Кинг Совершенно хорошо Острые ощущения ушли 1969
Фредди Кинг Подготовка… (Мир) Спуск 1971
Группа братьев Оллман The Allman Brothers Band Больше никаких проблем 1969
Джими Хендрикс Опытен ли ты Purple Haze
Бадди Гай Я гулял по лесу Камень Сумасшедшие 1986

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

Другие полезные сведения

Вот важная информация, которую вам необходимо запомнить для кроссбраузерной совместимости:

  • Как горизонтальная, так и вертикальная прокрутка позволят вам лучше разместить таблицы в адаптивном макете. Итак, если у вас очень широкие таблицы, которые отлично смотрятся на компьютере, но не на мобильных устройствах, используйте приведенные выше советы, чтобы добавить в таблицу горизонтальную прокрутку с фиксированными заголовками строк.
  • Элемент caption не будет оставаться на месте в прокрутке таблицы. При прокрутке слева направо он исчезнет и появится снова.
  • На момент написания этой статьи Firefox был единственным известным браузером, поддерживающим position: sticky on the thead element. По этой причине мы назначаем его элементам th в качестве обходного пути.
  • Safari на MacOS и iOS требует использования -webkit-sticky для свойства position .