Таблица с фиксированным заголовком

zuzzz · January 14, 2009

Не получается сделать таблицу у которой заголовок был бы не подвижным. И при этом что бы это нормально отображалось в разных браузерах.

Я много примеров нашел, но ни один не не отображает правильно одновременно и в IE и firefox.

Пожалуйста помогите мне....

Victor Ananiev · January 14, 2009

что означает неподвижный заголовок?

ZoNT · January 14, 2009

Не получается сделать таблицу у которой заголовок был бы не подвижным. И при этом что бы это нормально отображалось в разных браузерах.
Я много примеров нашел, но ни один не не отображает правильно одновременно и в IE и firefox.
Пожалуйста помогите мне....

Надо делать две таблицы: первая - только заголовок, вторая - контент.

zuzzz · January 14, 2009

Неподвижный заголовок, это когда при прокрутке большой таблицы, он не пропадал из виду, а был зафиксирован вверху таблицы. Т.е таблица с прокруткой строк и фиксированным заголовком.

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

Searcher · January 14, 2009

Стандартных средств для решения этой задачи нет. Первое, что приходит в голову: заголовок отдельно, сама таблица в div c overflow:auto и при помощи js коррекция ширины столбцов в шапке. А количество столбцов понятно будет еще в php.

Пришел в голову второй вариант... Поместить таблицу в div c overflow:auto, поверх неё в этом же блоке наверху абсолютно разместить непрозрачный div c overflow:hidden и со 100% шириной минус ширина полосы прокрутки и высотой равной высоте шапки таблицы, и разместить в этом блоке копию таблицы... Без js не обойтись и тут, надо будет получать высоту шапки и ширину клиентской области первого блока.

s0rr0w · January 14, 2009

Стандартных средств для решения этой задачи нет. Первое, что приходит в голову: заголовок отдельно, сама таблица в div c overflow:auto и при помощи js коррекция ширины столбцов в шапке. А количество столбцов понятно будет еще в php.
Пришел в голову второй вариант... Поместить таблицу в div c overflow:auto, поверх неё в этом же блоке наверху абсолютно разместить непрозрачный div c overflow:hidden и со 100% шириной минус ширина полосы прокрутки и высотой равной высоте шапки таблицы, и разместить в этом блоке копию таблицы... Без js не обойтись и тут, надо будет получать высоту шапки и ширину клиентской области первого блока.

Или переносить заголовок при скролле и ресайзе между строк таблицы к видимой строчке.

zuzzz · January 14, 2009

Стандартных средств для решения этой задачи нет. Первое, что приходит в голову: заголовок отдельно, сама таблица в div c overflow:auto и при помощи js коррекция ширины столбцов в шапке. А количество столбцов понятно будет еще в php.
Пришел в голову второй вариант... Поместить таблицу в div c overflow:auto, поверх неё в этом же блоке наверху абсолютно разместить непрозрачный div c overflow:hidden и со 100% шириной минус ширина полосы прокрутки и высотой равной высоте шапки таблицы, и разместить в этом блоке копию таблицы... Без js не обойтись и тут, надо будет получать высоту шапки и ширину клиентской области первого блока.

С первым вариантом вообще не хочется заморачиватся... во первых муторно, а во вторых не красиво получится,

А в третих, что произойдёт при изменении размера окна? Наверняка всё сместится....

Второй вариант вариант мне больше нравится, но не всё понятно. Как копию таблицы сделать? Наверно тоже не сумею реализовать.

Я находил более интересные примеры..... они работают, но в IE не корректно отображаются ячейки с rowspan

к примеру этот, не самый простой зато наиболее работоспасобный:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Lock Table Head</title>

<style type='text/css'>

/* DIV container around table to constrict the height for IE (IE ignores the tbody height style) */
div.FixedTableHead {
	overflow-y:auto;

	/* this fixes IE so container width is same as table width */
	width: expression( (this.childNodes[0].clientWidth) + 'px' );

	/* This fixes IE so the container height is table height plus the height of the header */
	height: expression( (parseInt(this.childNodes[0].style.height) + this.childNodes[0].childNodes[1].offsetTop + 1) +'px' );
}

/* Scrollable Content */
.FixedTableHead table tbody {
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
}

.FixedTableHead table tbody tr {
	height: auto;
	white-space: nowrap;
}

/* Prevent Mozilla scrollbar from hiding right-most cell content */
.FixedTableHead table tbody tr td:last-child {
	padding-right: 20px;
}

/* Fixed Header */
/* In WinIE any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
.FixedTableHead table thead tr {
	position: relative;
	height: auto;
	/* this fixes IE header jumping bug when mousing over rows in the tbody */
	top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
}

/* Fixed Header */
.FixedTableHead table thead tr td {
	border-bottom:1px solid #000000;
	background-color:white;
}
</style>

</head>

<body>

Lock Table Headings<br />

<br />
<div class="FixedTableHead">
	<table border=1 cellspacing=0 style="height:100px;">
		<thead>
			<tr><td rowspan=2>Title #1</td><td>Title #2....</td><td>Title #3.......</td><td>#4</td></tr>
			<tr><td>Title #2....</td><td>Title #3.......</td><td>#4</td></tr>
		</thead>
		<tbody>
			<tr><td>Item 1...........</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
			<tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
			<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
			<tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
			<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
			<tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
			<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
			<tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
			<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
			<tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
			<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
			<tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
			<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
			<tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
			<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
			<tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
		</tbody>
	</table>
</div>

</body>
</html>

Или переносить заголовок при скролле и ресайзе между строк таблицы к видимой строчке.

а это как?

Searcher · January 14, 2009

Второй вариант вариант мне больше нравится, но не всё понятно. Как копию таблицы сделать? Наверно тоже не сумею реализовать.

Копировать легко, есть 2 варианта:

1. на сервере формировать можно как первую, так и вторую таблицу

2. при помощи JS через свойство innerHTML у объекта <table>

Edited January 14, 2009 by Searcher

zuzzz · January 14, 2009

Копировать легко, есть 2 варианта:
1. на сервере формировать можно как первую, так и вторую таблицу
2. при помощи JS через свойство innerHTML у объекта <table>

на сервере, то можно , но блин интернет трафика в два раза больше будет, таблицы в некоторых отчетах очень большие

второй вариант попробую, если ни чего лучше не найду.

Sign In

Таблица с фиксированным заголовком

Question

zuzzz

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Victor Ananiev

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

zuzzz

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

zuzzz

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

zuzzz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information