Среда, 02 Апреля 2014 09:02

Таблица со скроллом

Written by 
Оцени эту запись
(48 Голоса)

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

 

Пример:

 

Name Description
Name 1 Description 1
Name 2 Description 2
Name 3 Description 3
Name 4 Description 4
Name 5 Description 5
Name 6 Description 6
Name 7 Description 7
Name 8 Description 8
Name 9 Description 9
Name 10 Description 10
Name 11 Description 11

 

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

 

.scrolling-table {
width: 300px; 
border: none;
}
 
.scrolling-table th {
color: #E90E8B;
border-bottom: 1px solid #E90E8B;
}
 
.scrolling-table tr td {
width: 50%;
padding: 2px 5px;
border-right: 1px solid #E90E8B;
border-bottom: 1px solid #E90E8B;
text-align: center;
color: #666;
}
 
.scrolling-table tr td:last-child {
border-right: none;
}
 
.scrolling-table tr:last-child td {
border-bottom: none;
}
 
 
Теперь переходим к самому вкусному! :-) Для реализации скролла, нам нужно прописать таблице thead и tbody:
 
 
<table>
  <thead>
    <tr>
      <th>Заголовок</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Значение</td>
    </tr>
  </tbody>
</table>
 
Теперь нужно из tbody сделать обычный блочный элемент, чтобы ему можно было добавить скролл. А скролл сработает только в том случае, если элементу задать фиксированную высоту (если скролл вертикальный) или максимальную высоту. Кроме того не помешает задать также фиксированную ширину. Или же просто 100%. Получаем такой набор стилей:
 
 
.scrolling-table tbody {
      display: block;
      height: 150px;
      width: 300px;
      overflow: hidden;
      overflow-y: auto;
}
 
Если вы, задав указанные ранее стили таблице, посмотрите на нее, то увидите, то она выглядит не самым желательным образом. Изменив отображение tbody мы немножко поломали саму суть таблицы. Но мы это сейчас исправим, изменив отображение tr:
 
 
.scrolling-table tr {
    display: table;
    width: 300px;
    table-layout: fixed;
}

 

Таким образом мы каждую строку таблицы сделали отдельной таблицей и задали каждой нужную ширину.

 

Теперь хочу обратить внимание на несколько моментов:

 

1. Свойство table-layout, которое здесь использовалось заставляет ячейки занимать точно отведенные им размеры. Оно необходимо, чтобы убрать свойство ячеек растягиваться по размерам контента.

 

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

 

th:nth-child(1), td:nth-child(1) {

width: 50px;

}

th:nth-child(2), td:nth-child(2) {

width: 100px;

}

th:nth-child(3), td:nth-child(3) {

width: 150px;

}

 

Вот таким образом мы и можем сделать скроллбар таблицы, который будет скроллить только строки, оставляя заголовки на своем месте!

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов