Сегодня хочу рассказать о способе создания
таблиц со скролингом. Где может пригодится ? Скажем, у Вас есть таблица с
большим количеством выводимых данных, но места для ее отображения немного - вот тут то скролинг и поможет.
Погуглив можно легко найти
JS реализацию таких таблиц как скажем
jQuery Scrollable Table Plugin, но его минус в том что
плагин перестраивает DOM и вместо 1 таблицы у Вас уже несколько. Согласитесь, не очень удобно если Вы хотели еще навесить сверху на таблицу
TableSorter (кстати TableSorter имеет свою пагинацию).
Итак если Вы все же сказали
"Хочу таблицу со скролом на CSS" тогда приступим:
Будем использовать следующую разметку :
<div id="tableContainer">
<table>
<thead>
<tr>...</tr>
</thead>
<tfoot>
<tr>...</tr>
</tfoot>
<tbody>
<tr>...</tr>
</tbody>
</table>
</div>
Итак - таблица:
Топ-70 самых влиятельных людей мира
Rank |
Name/Title |
Organization |
Age |
Тут | фиксированная строка | для добавления новых записей |
|
1 |
Barack Obama
President
|
United States of America |
50 |
2 |
Vladimir Putin
Prime Minister
|
Russia |
59 |
3 |
Hu Jintao
President
|
People's Republic of China |
68 |
4 |
Angela Merkel
Chancellor
|
Germany |
57 |
5 |
Bill Gates
Co-Chair
|
Bill & Melinda Gates Foundation |
56 |
6 |
Abdullah bin Abdul Aziz al Saud
King
|
Saudi Arabia |
87 |
7 |
Pope Benedict XVI
Pope
|
Roman Catholic Church |
84 |
8 |
Ben Bernanke
Chairman of the Federal Reserve
|
United States of America |
57 |
9 |
Mark Zuckerberg
Founder
|
Facebook |
27 |
10 |
David Cameron
Prime Minister
|
United Kingdom |
45 |
11 |
Sonia Gandhi
President
|
Indian National Congress |
64 |
12 |
Mario Draghi
President
|
European Central Bank |
64 |
13 |
Nicolas Sarkozy
President
|
France |
56 |
14 |
Wen Jiabao
Premier
|
People's Republic of China |
69 |
15 |
Zhou Xiaochuan
Governor
|
People's Bank of China |
63 |
16 |
Hillary Clinton
Secretary of State
|
United States of America |
64 |
17 |
Michael Bloomberg
Mayor
|
New York City |
69 |
18 |
Timothy Geithner
Secretary of the Treasury
|
United States of America |
50 |
19 |
Manmohan Singh
Prime Minister
|
India |
79 |
20 |
Warren Buffett
CEO
|
Berkshire Hathaway |
81 |
21 |
Silvio Berlusconi & family
Prime Minister
|
Italy |
75 |
22 |
Dilma Rousseff
President
|
Brazil |
63 |
23 |
Carlos Slim Helu & family
Chairman
|
Telmex |
71 |
24 |
Rupert Murdoch
CEO
|
News Corp. |
80 |
25 |
Benjamin Netanyahu
Prime Minister
|
Israel |
62 |
26 |
Ali Hoseini-Khamenei
Grand Ayatollah
|
Iran |
72 |
27 |
Michael Duke
CEO
|
Wal-Mart |
61 |
28 |
Jeffrey Immelt
CEO
|
General Electric |
55 |
29 |
Zhou Yongkang
Secretary of the Commission for Political and Legislative Affairs
|
People's Republic of China |
68 |
30 |
Sergey Brin
Co-Founder
|
Google |
38 |
30 |
Larry Page
Co-Founder
|
Google |
38 |
31 |
Ali Al-Naimi
Oil Minister
|
Saudi Arabia |
76 |
32 |
Rostam Ghasemi
President
|
Organization of the Petroleum Exporting Countries (OPEC) |
47 |
33 |
Lou Jiwei
Chairman
|
China Investment Corporation |
60 |
34 |
Ashfaq Parvez Kayani
Chief of Army Staff
|
Pakistan |
59 |
35 |
Mukesh Ambani
Chairman
|
Reliance Industries |
54 |
36 |
Masaaki Shirakawa
Governor
|
Bank of Japan |
62 |
37 |
Kim Jong-il
Supreme Leader
|
North Korea |
69 |
38 |
Ban Ki-moon
Secretary-General
|
United Nations |
67 |
39 |
Christine Lagarde
Managing Director
|
International Monetary Fund |
55 |
40 |
Jeff Bezos
CEO
|
Amazon |
47 |
41 |
Jamie Dimon
CEO
|
JPMorgan Chase & Co. |
55 |
42 |
Robin Li
CEO
|
Baidu |
42 |
43 |
Lloyd Blankfein
CEO
|
Goldman Sachs |
57 |
44 |
Li Ka-shing
Chairman
|
Hutchison Whampoa Limited |
83 |
45 |
Charles Koch
CEO
|
Koch Industries |
76 |
45 |
David Koch
Executive Vice President
|
Koch Industries |
71 |
46 |
Rex Tillerson
CEO
|
ExxonMobil |
59 |
47 |
Lakshmi Mittal
Chairman
|
ArcelorMittal |
61 |
48 |
Recep Erdogan
Prime Minister
|
Republic of Turkey |
57 |
49 |
Robert Zoellick
President
|
World Bank Group |
58 |
50 |
Bill Clinton
Former President
|
United States of America |
65 |
51 |
Dalai Lama
Dalai Lama
|
Tibet |
76 |
52 |
Larry Fink
CEO
|
BlackRock |
59 |
53 |
Khalifa bin Zayed Al-Nahyan
President
|
United Arab Emirates |
63 |
54 |
Bill Gross
Co-Founder
|
PIMCO |
67 |
55 |
Joaquin Guzman Loera
Drug Trafficker
|
Sinaloa Cartel |
54 |
56 |
Ahmed Shuja Pasha
Director-General of Inter-Services Intelligence
|
Pakistan |
59 |
57 |
Dawood Ibrahim Kaskar
Leader
|
D-Company |
55 |
58 |
Tim Cook
CEO
|
Apple |
51 |
59 |
Dmitry Medvedev
President
|
Russia |
46 |
60 |
Masayoshi Son
CEO
|
SoftBank |
54 |
61 |
Azim Premji
Chairman
|
Wipro Limited |
66 |
62 |
Yoshihiko Noda
Prime Minister
|
Japan |
54 |
63 |
Joseph Blatter
President
|
International Federation of Association Football (FIFA) |
75 |
64 |
Jill Abramson
Executive Editor
|
The New York Times |
57 |
65 |
Bernard Arnault
Chairman
|
Louis Vuitton Moet Hennessy (LVMH) |
62 |
66 |
Sebastian Pinera
President
|
Chile |
61 |
67 |
John Boehner
Speaker
|
United States House of Representatives |
61 |
68 |
Jacques Rogge
President
|
International Olympic Committee |
69 |
69 |
Xi Jinping
First Secretary of the Secretariat of the Communist Party
|
People's Republic of China |
58 |
70 |
Alisher Usmanov
Oligarch
|
- |
58 |
А вот CSS использованный для ее отображения:
#tableContainer thead, #tableContainer tfoot{
display:block;
float:left;
clear:both;
}
#tableContainer tfoot{
position: relative;
top: 400px;
}
#tableContainer tbody{
height: 400px;
overflow: auto;
display: block;
clear:both;
float:left;
width: 667px;
position: relative;
top: -34px;
}
#tableContainer tr {height: 1%}/*For IE*/
#tableContainer th,#tableContainer td {width: 50px;}
#tableContainer th+th,#tableContainer td+td {width: 250px;}
#tableContainer th+th+th,#tableContainer td+td+td {width: 250px;}
#tableContainer th+th+th+th,#tableContainer td+td+td+td {width: 50px;}
/* Style */
#tableContainer td, #tableContainer th{
background-color: #f1f1f1;
padding: 5px;
}
#tableContainer th{background-color:#ffc100;}
#tableContainer img{float:left; margin-right: 5px;}
#tableContainer h3,h4{margin:0; padding: 0;}
#tableContainer h3{font-size: medium;}
#tableContainer h4{font-size: small;}
К сожалению метод
не идеален и
работает под :
FF, Opera, Chrome, Safari,
IE8+(в режиме соответствия стандартам).
Радует то что в предыдущих версиях браузеров таблица не лезет на потолок а отображается как обычная таблица.
Важные заметки:
- Указание position:relative; и сдвига вверх для тела и футера таблицы необходимо, но необязательно если отойти от правил разметки и указать футер после тела
- Если Вы решились поставить tfoot после tbody тогда вам может пригодится margin-top : -1px; ибо в ИЕ он может спустится ниже чем ему позволено
- Будьте осторожны при использовании hover эффектов - я столкнулся с тем что при навешивании ховера для строки таблицы с помощью jQuery в ИЕ когда курсор попадал на границу между двумя строками подсвечивалася первая строка - фиксится путем указания для таблицы border-collapse: collapse;
- Что б заставить ИЕ перейти в режим соответствия стандартам необходимо указать полный доктайп , пример : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">. Если доктайп будет без URL (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">), то ИЕ не перейдет в режим соответствия стандартам.
Комментариев нет:
Отправить комментарий