zuzzz
-
Posts
5 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by zuzzz
-
-
Копировать легко, есть 2 варианта:
1. на сервере формировать можно как первую, так и вторую таблицу
2. при помощи JS через свойство innerHTML у объекта <table>
на сервере, то можно , но блин интернет трафика в два раза больше будет, таблицы в некоторых отчетах очень большие
второй вариант попробую, если ни чего лучше не найду.
-
Стандартных средств для решения этой задачи нет. Первое, что приходит в голову: заголовок отдельно, сама таблица в 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>Или переносить заголовок при скролле и ресайзе между строк таблицы к видимой строчке.а это как?
-
Неподвижный заголовок, это когда при прокрутке большой таблицы, он не пропадал из виду, а был зафиксирован вверху таблицы. Т.е таблица с прокруткой строк и фиксированным заголовком.
Из двух таблиц, у меня не получится, т.к. в этом случае надо строго задавать ширину колонок. У меня таблица строится динамически. Количество строк, столбцов может быть любым. Данные в таблице тоже могут быть разными, это может быть простое число, а может быть длинный текст. Лучше что бы таблица сама растягивалась по содержимому в ячейках.
-
Не получается сделать таблицу у которой заголовок был бы не подвижным. И при этом что бы это нормально отображалось в разных браузерах.
Я много примеров нашел, но ни один не не отображает правильно одновременно и в IE и firefox.
Пожалуйста помогите мне....
Закрепление области в таблице (аналог excell)
in HTML Coding
Posted
мне тоже интересно, как ты это сделал.