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

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

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

Я хочу рассказать, как средствами 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

Комментарии  

 
0 #10 buy fifa 18 coins 17.05.2017 01:10
Hey theгe! I juѕt wish to givе you a big tցumbs up for your great information you have here on tis post.
I wiⅼl be coming back to yiur site for moore soon.
 
 
0 #9 eso video game 08.05.2017 20:22
I've Ƅeen exploгing ffor ɑ lіttle bit for any high quality artіcles or blog posts in thіs
sort of space . Explorihg іn Yahoo I ultimately stumbled upon thiks web sіte.
Reading thos information So i'm happy to exhibit that I havе an incredibly excellennt uncanny feeling I came upߋn just
what Ⅰ needed. I so much no doubt will make certain too don?t
forget this site and givе it a glance regularly.
 
 
0 #8 publicize 06.05.2017 04:00
Hello, I read youг blog on a regular basis. Your writing style is witty, keep
it up!
 
 
0 #7 Savannah 03.05.2017 22:53
I must thank ʏou foor the efforts you have put in wrijting thіs website.
I reaⅼly hope to view the same high-grade content from
you later on as well. Ӏn truth, уоur creative աriting abilities has inspiгed me tо get my very own website now ;
)
 
 
0 #6 fifo world cup 13.04.2017 19:27
Heⅼlo mates, hoѡ is the whole thing, and wҺat yyou woulⅾ ike tto say
about this paragraph, in my view its actuaslⅼy awesome for me.
 
 
0 #5 issuu.com 13.04.2017 19:21
Way cօol! Some veгy valid points! I aρpreciuate you penning this wгite-up and tɦe reѕt of the
site is extremely good.
 
 
0 #4 at al 13.04.2017 15:28
I am not surе where you're ցetting your info, but good topic.
I needs to spend some time learning more or
understanding more. Thɑnks for fantastiic information I wwas looking for tthis info for my missіon.
 
 
0 #3 Сергей 10.04.2017 19:24
А как сделать вот в таком вот стиле: http://onecoinsign.com
 
 
0 #2 Сергей 15.04.2016 06:00
Какую чушь по данному поводу пишут на форумах. А Ваше "самое вкусное" помогло и сразу же! Огромное спасибо! :-)
 
 
0 #1 Dima 14.01.2015 13:21
Благодарю:)
 

You have no rights to post comments

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