Файл index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fix Header and First column Table</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<!-- Просто блок, в котором находится наша таблица -->
<div id="table-block">
<!-- Весь заголовок таблицы -->
<div class="table-header">
<!-- Левый верхний блок DIV -->
<div class="table-head-first">Компании</div>
<!-- Правый верхний блок DIV -->
<div class="table-head">
<div class="table-head-wrapper">
<table>
<tr>
<td><div>Запасы</div></td>
<td><div>Основные средства</div></td>
<td><div>Долгоср. актив</div></td>
<td><div>Краткоср. активы</div></td>
<td><div>Актив</div></td>
<td><div>Период/тип отч.</div></td>
</tr>
</table>
</div>
</div>
</div>
<!-- Содержимое таблицы -->
<!-- Левый нижний блок DIV -->
<div class="table-data-first">
<table>
<tr>
<td><div>VimpelCom Ltd. (ВымпелКом)</div></td>
</tr>
<tr>
<td><div>Газпром</div></td>
</tr>
<tr>
<td><div>Газпром Нефть</div></td>
</tr>
<tr>
<td><div>ЛУКОЙЛ НК</div></td>
</tr>
<tr>
<td><div> МТС</div></td>
</tr>
<tr>
<td><div>НЛМК</div></td>
</tr>
<tr>
<td><div>НОВАТЭК</div></td>
</tr>
<tr>
<td><div>Норильский никель ГМК</div></td>
</tr>
<tr>
<td><div>Роснефть НК</div></td>
</tr>
<tr>
<td><div>Сургутнефтегаз</div></td>
</tr>
<tr class="last">
<td><div></div></td>
</tr>
</table>
</div>
<!-- Правый нижний блок DIV -->
<div class="table-data">
<div class="table-data-wrapper">
<table>
<tr>
<td>167.00</td>
<td>15 666.00</td>
<td>45 820.00</td>
<td>9 540.00</td>
<td>55 360.00</td>
<td>2012 г. 4 кв., GAAP</td>
</tr>
<tr>
<td>14 779.36</td>
<td>251 452.22</td>
<td>310 661.81</td>
<td>77 469.19</td>
<td>388 131.00</td>
<td>2012 г. 4 кв., IAS</td>
</tr>
<tr>
<td>2 907.09</td>
<td>26 235.75</td>
<td>32 885.84</td>
<td>13 052.08</td>
<td>45 937.91</td>
<td>2013 г. 2 кв., IAS</td>
</tr>
<tr>
<td>7 848.00</td>
<td>69 640.00</td>
<td>77 799.00</td>
<td>23 375.00</td>
<td>101 174.00</td>
<td>2013 г. 1 кв., GAAP</td>
</tr>
<tr>
<td>264.87</td>
<td>8 762.52</td>
<td>1 171.89</td>
<td>3 607.77</td>
<td>15 324.00</td>
<td>2013 г. 1 кв., GAAP</td>
</tr>
<tr>
<td>2 530.19</td>
<td>10 981.40</td>
<td>12 100.62</td>
<td>5 537.20</td>
<td>17 637.82</td>
<td>2013 г. 2 кв., GAAP</td>
</tr>
<tr>
<td>99.41</td>
<td>6 347.93</td>
<td>13 021.92</td>
<td>1 873.19</td>
<td>14 895.11</td>
<td>2012 г. 4 кв., IAS</td>
</tr>
<tr>
<td>3 195.00</td>
<td>11 502.00</td>
<td></td>
<td>7 262.00</td>
<td>20 226.00</td>
<td>2013 г. 2 кв., IAS</td>
</tr>
<tr>
<td>5 990.54</td>
<td>150 536.59</td>
<td>76 978.72</td>
<td>42 094.85</td>
<td>219 073.57</td>
<td>2013 г. 2 кв., IAS</td>
</tr>
<tr>
<td>1 689.58</td>
<td>29 604.01</td>
<td>48 949.39</td>
<td>17 656.16</td>
<td>66 605.54</td>
<td>2012 г. 4 кв., IAS</td>
</tr>
<tr class="last">
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Файл index.css
/*\
* ===============================================>
* Reset CSS
* ===============================================>
\*/
html {
font-size: 100.01%; /* Bug fix for Opera */
}
body {
width: 1000px;
position: relative; /* Bug fix for IE 6 */
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
background-color: #bbbbbb;
color: #333333;
}
div,h1,h2,h3,h4,h5,h6,p,img,ol,ul,li,table,th,td,form,select,fieldset {
margin: 0;
padding: 0;
text-align: left;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol,ul {
list-style: none;
}
table {
border: 0px; /* border="0" */
border-collapse: collapse; /* cellspacing="0" */
}
table tr th {
padding: 0px; /* cellpadding="0" */
}
table tr td {
padding: 0px; /* cellpadding="0" */
}
input,textarea,select {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
textarea {
resize: none;
}
a img {
border: none;
}
a {
color: #333333;
text-decoration: underline;
}
a:hover {
color: #000000;
}
a:active {
text-decoration: none;
}
/* Firefox anchor border remove */
a:active,a:focus,img {
outline: 0;
}
/*\
* ===============================================>
* Fix Header and First column Table style
* ===============================================>
\*/
/* Просто блок, в котором находится наша таблица */
div#table-block {
width: 900px;
height: 400px;
padding: 5px;
background-color: #ffffff;
border: 1px solid #000000;
font-size: 1.3em;
line-height: 22px;
overflow: hidden;
}
/* Общие стили для всей таблицы*/
div#table-block table {
width: auto;
/* border-collapse: separate !important; */
}
div#table-block table tr td {
white-space: nowrap;
}
div#table-block table tr td div {
overflow: hidden;
}
div.table-header {
border: 1px solid #999999; /* Установлены все границы для заголовка таблицы */
}
div.table-head-wrapper,
div.table-data-wrapper {
width: 100000px;
}
/* Левый верхний блок DIV */
div.table-head-first {
float: left;
*display: inline;
_display: inline;
overflow: hidden;
width: 260px;
_margin-right: -3px;
height: 32px;
_height: 28px;
line-height: 16px;
padding: 0 5px;
_padding-bottom: 4px;
border-right: 1px solid #999999;
text-align: center;
}
/* Правый верхний блок DIV */
div.table-head {
line-height: 16px;
overflow: hidden;
}
div.table-head table tr td {
padding: 0 15px;
border-right: 1px solid #999999;
vertical-align: top;
text-align: center;
}
div.table-head table tr td div {
height: 32px;
text-align: center;
}
/* Левый нижний блок DIV */
div.table-data-first {height: 197px; /* Значение для примера */
float: left;
*display: inline;
_display: inline;
overflow: hidden;
_margin-right: -3px;
border-left: 1px solid #999999;
border-bottom: 1px solid #999999;
}
div.table-data-first table tr td {
padding: 0 5px;
_padding: 1px 5px;
border-bottom: 1px solid #999999;
}
div.table-data-first table tr td div {
width: 260px;
}
div.table-data-first table tr.last td {
border-bottom: none;
}
/* Правый нижний блок DIV */
div.table-data {height: 215px; /* Значение для примера */
overflow: scroll;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
}
div.table-data table tr td {
padding: 0 15px;
_padding: 1px 15px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
text-align: right;
}
div.table-data table tr.last td {
border-bottom: none;
}
Файл index.js
// НАЧАЛО - МИНИМАЛЬНО НЕОБХОДИМЫЙ КОД ДЛЯ ВЫРАВНИВАНИЯ И ПРОКРУЧИВАНИЯ ТАБЛИЦЫ
// Возвращает ширину скролбара
function getScrollbarWidth() {
var scrollbarWidth
, blockWidthWithoutScrollbar
, blockWidthWithScrollbar
, div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');
$('body').append(div);
blockWidthWithoutScrollbar = $('div', div).innerWidth();
div.css('overflow-y', 'scroll');
blockWidthWithScrollbar = $('div', div).innerWidth();
$(div).remove();
scrollbarWidth = blockWidthWithoutScrollbar - blockWidthWithScrollbar;
if (!scrollbarWidth) {
scrollbarWidth = 16;
}
return scrollbarWidth;
}
// Возвращает ширину 1em в пикселях
function getEmWidth(element) {
var tmp = $('<div style="position: absolute; z-index: -1000; width: 1em; margin: 0; padding: 0;"></div>')
, width;
element.append(tmp);
width = tmp.width();
$(tmp).remove();
return width;
}
// Выравнивает ширину ячеек таблицы
function alignTableCellsWidth(table) {
var headTdCells = table.find('.table-head td div')
, em = getEmWidth(table.find('.table-data td:last'))
, leftPlusRightBorderWidth = 2;
table.find('.table-data table tr.last, .table-side table tr.last').remove();
table.find('.table-data table').append('<tr class="last"></tr>');
table.find('.table-side table').append('<tr class="last"><td><div></div></td></tr>');
headTdCells.each(function(index){
var td = $('<td><div></div></td>');
table.find('.table-data tr.last').append(td);
var dataTdCell = td.find('div');
var thWidth = $(this).width();
var tdWidth = dataTdCell.width();
var emWidth;
if (thWidth > tdWidth){
emWidth = Math.floor(thWidth / em) + 2;
} else {
emWidth = Math.floor(tdWidth / em) + 2;
}
dataTdCell.css('width', emWidth + 'em');
$(this).css('width', emWidth + 'em');
});
table.find('.table-head-wrapper').width(table.find('.table-head-wrapper table').width() + getScrollbarWidth() + leftPlusRightBorderWidth);
table.find('.table-data-wrapper').width(table.find('.table-data-wrapper table').width());
}
// Прокрутка для таблицы
function initTableScroll () {
$('.table-data:first').scroll(function(){
var top = $(this).scrollTop();
var left = $(this).scrollLeft();
$('.table-data-first').scrollTop(top);
$('.table-head').scrollLeft(left);
});
}
// КОНЕЦ - МИНИМАЛЬНО НЕОБХОДИМЫЙ КОД ДЛЯ ВЫРАВНИВАНИЯ И ПРОКРУЧИВАНИЯ ТАБЛИЦЫ
// НАЧАЛО - ДОПОЛНИТЕЛЬНЫЙ КОД
//Сбрасывает стили таблицы
function resetTable(table){
table.find('.table-head-wrapper, .table-data-wrapper, .table-head td div, .table-data td div').removeAttr('style');
}
// КОНЕЦ- ДОПОЛНИТЕЛЬНЫЙ КОД
$(document).ready(function(){
// НАЧАЛО - МИНИМАЛЬНО НЕОБХОДИМЫЙ КОД ДЛЯ ВЫРАВНИВАНИЯ И ПРОКРУЧИВАНИЯ ТАБЛИЦЫ
alignTableCellsWidth($('#table-block'));
initTableScroll();
// КОНЕЦ - МИНИМАЛЬНО НЕОБХОДИМЫЙ КОД ДЛЯ ВЫРАВНИВАНИЯ И ПРОКРУЧИВАНИЯ ТАБЛИЦЫ
});
