Закрепление области в таблице (аналог excell)

Lexxus · June 22, 2008

Hi многоуважаемый All !

Подскажите плиз как в таблице закрепить области - правый столбец и шапку ?

Т.е. так, как можно закрепить в экселе ?

Dimitry Wolotko · June 22, 2008

Не вкурил, поподробней, пожалуйста.

Lexxus · June 22, 2008

ну в смысле закрепить в таблице шапку и левый столбец - чтоб при прокрутке таблицы закрепленные шапка и столбец остались на месте, а скролл был по остальной части таблицы. просто есть большая (широкая) таблица, ее просто так не уместить.

так можно в таблицах экселя делать, а вот как в html сделать - не знаю

Dimitry Wolotko · June 22, 2008

Сортировка вроде называется

пробуйте стиль position

ZoNT · June 22, 2008

это тебе не эксель - не получится нифига. Расковыряй гуг-докс и посмотри как у них сделано...

Lexxus · June 22, 2008

Сортировка вроде называется пробуйте стиль position

не, это не то...

Lexxus · June 22, 2008

это тебе не эксель - не получится нифига. Расковыряй гуг-докс и посмотри как у них сделано...

там тоже области не закрепляются..

Dimitry Wolotko · June 23, 2008

<div>тут закрепляем, делаем сортировочку и что угодно</div>
<div>
 <div style="overflow:scroll;"></div>
</div>

Lexxus · June 23, 2008

сортировку не надо.

а как закрепить-то, не догоню что-то

Dimitry Wolotko · June 23, 2008

Я выше пример дал.

Lexxus · June 23, 2008

что-то типа:

xxxxxxxxxxxxxxxxxxxxxxx

не работает...

Dimitry Wolotko · June 23, 2008

О боже мой:

<div>
 <div>stick block</div>
 <div style="overflow:scroll;">
 <table>
 <tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 <td>4</td> 
 </tr>
 <tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 <td>4</td> 
 </tr>
 </table>
 </div>
</div>

Lexxus · June 23, 2008

нет, так не пойдет, видимо изначально не так объяснил.

шапка тоже широкая, так вот надо, чтобы шапка двигалась (скроллом) по горизонтали, но не по вертикали

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

Lexxus · June 23, 2008

так, в принципе, разобрался, спасибо.

теперь очередной вопрос - пытаюсь "скроллировать" эту область не передвижением бегунка, а клавишами на клавиатуре - вправо-влево.

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

vanesh · January 16, 2009

так, в принципе, разобрался, спасибо.

раз разобрался, поделись пожалуйста с товарищами. я всю голову сломал как это сделать.......

zuzzz · January 16, 2009

так, в принципе, разобрался......

мне тоже интересно, как ты это сделал.

Oktolom · January 13, 2010

Да способ прикольный

но как быть если высоту ячеек в первой колонке и в основной таблице нельзя фиксировать

контент наполняется автоматически а ширина ячеек фиксированая, следовательно высота будет плавать у ячеек и они не совпадут в первом столбце и основной таблице.

как быть?

Great Rash · January 14, 2010

контент наполняется автоматически а ширина ячеек фиксированая, следовательно высота будет плавать у ячеек и они не совпадут в первом столбце и основной таблице.
как быть?

Изменять высоту яваскриптом. Это же очевидно.

Oktolom · January 14, 2010

Приведи пример если это так очевидно

Great Rash · January 14, 2010

Скрипт писать лень.

Searcher · January 15, 2010

Поднималась тут как-то тема подобная... Нашел я код для фиксированного заголовка:

<!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>

В ваших руках дальнейшее расширение решения до создания фиксированного столбца.

Тонкость тут есть одна. Тонкость эту ИЕ не понимает. О заголовке в 2 строки говорю. Если такого не требуется - равновесие соблюдено будет.

Sign In

Закрепление области в таблице (аналог excell)

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information