VPF::Таблица с прокруткой - Форум программистов

Avtor

Дата 23.11.2007, 20:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 111
Регистрация: 21.7.2006

Репутация: нет
Всего: нет

Не знаю, в нужный ли раздел обратился, но мне нужно реализовать таблицу с неподвижным заголовком и прокручивающимся с помощью скролла остальным телом. Подскажите как такое сделать (фреймы не подходят).

soloweb

Дата 23.11.2007, 20:51 (ссылка)

(нет голосов)

Загрузка ...

Georgian

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 30.10.2006

Репутация: нет
Всего: нет

Получается то что ты должен создать 2 div элемента!
В первом div ты делаешь заголовки а во втором прописываешь ширину высоту и свойство overflow: scroll; в стиле
После этого то что у тебя выйдет за рамки во втором диве будет скролироватся smile

, тоесть появятся полосы прокуртки.
http://htmlbook.ru/ вот тебе на затравкую

Avtor

Дата 23.11.2007, 21:04 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 111
Регистрация: 21.7.2006

Репутация: нет
Всего: нет

То есть в первом диве отдельная таблица с заголовком, а во втором - отдельная таблица со всем содержимым?

soloweb

Дата 23.11.2007, 21:06 (ссылка)

(нет голосов)

Загрузка ...

Georgian

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 30.10.2006

Репутация: нет
Всего: нет

Так точно

Avtor

Дата 23.11.2007, 21:12 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 111
Регистрация: 21.7.2006

Репутация: нет
Всего: нет

А если некоторые столбцы таблицы не фиксированы. Некоторые столбцы в теле поплывут, а в заголовке останутся на месте...

soloweb

Дата 23.11.2007, 21:16 (ссылка)

(нет голосов)

Загрузка ...

Georgian

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 30.10.2006

Репутация: нет
Всего: нет

Тогда фиксируйте их если они у вас такие и никаких проблем не будет, все должно переносится на новую строку. Ну или на худой конец делайте ячейки тоже div елементами в которых будет содержание, но думаю это не к чему smile

Ghirik

Дата 23.11.2007, 22:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Вот ещё посмотрите решение подобной задачи от SelenIT, вам только нужно расположить блоки по другому.

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Avtor

Дата 25.11.2007, 15:07 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 111
Регистрация: 21.7.2006

Репутация: нет
Всего: нет

Если изобразить в варианте с отдельными таблицами, то получается вот, так:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title></title>
  </head>
  <body>      
    <div>
      <table align="center" border="1" width="630" style="table-layout:fixed">
        <tr>
          <th width="30">№ п/п<th>
          <th width="150">фамилия<th>
          <th width="100">имя<th>
          <th width="150">отчество<th>
          <th width="200">должность<th>
        </tr>
      </table>
    </div>  
    <div style="overflow:auto;height:100%">
      <table align="center" border="1" width="630" style="table-layout:fixed">
        <tr>
          <td width="30">1<td>
          <td width="150">Иванов<td>
          <td width="100">Иван<td>
          <td width="150">Иванович<td>
          <td width="200">плотник<td>
        </tr>
        <tr>
          <td width="30">1<td>
          <td width="150">Петров<td>
          <td width="100">Иван<td>
          <td width="150">Иванович<td>
          <td width="200">столяр<td>
        </tr>
        <tr>
          <td width="30">1<td>
          <td width="150">Сидоров<td>
          <td width="100">Иван<td>
          <td width="150">Иванович<td>
          <td width="200">маляр<td>
        </tr>
        <tr>
          <td width="30">1<td>
          <td width="150">Иванов<td>
          <td width="100">Иван<td>
          <td width="150">Иванович<td>
          <td width="200">механик<td>
        </tr>
        <tr>
          <td width="30">1<td>
          <td width="150">Иванов<td>
          <td width="100">Иван<td>
          <td width="150">Иванович<td>
          <td width="200">дворник<td>
        </tr>
        <tr>
          <td width="30">1<td>
          <td width="150">Иванов<td>
          <td width="100">Иван<td>
          <td width="150">Иванович<td>
          <td width="200">сторож<td>
        </tr>        
      </table>
    </div>      
  </body>
</html>

Но есть очень серьезный глюк - при появлении скролла основная таблица отъезжает. Помогите как-то исправить (только не путем align="left").

Это сообщение отредактировал(а) Avtor - 25.11.2007, 15:13

mifkys

Дата 23.10.2009, 13:45 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 29.7.2008

Репутация: нет
Всего: нет

берется таблица такого вида и заключается в див:

Код


<body>
<div class="tablescroll">
<table height=100%>
<thead>
<tr><td>Заголовок</td></tr>
</thead>
<tbody>
<tr><td>Тело</td></tr>
<tr><td>Тело</td></tr>
<tr><td>Тело</td></tr>
<tr><td>Тело</td></tr>
</tbody>
<tfoot>
<tr><td>Подвал</td></tr>
</tfoot>
</table>
</div>
</body>

к диву приписываются стили:

Код


div.tablescroll table thead tr{
                    position:relative;
                    top:expression((this.parentElement.parentElement.parentElement.scrollTop-1) +" px");
}
div.tablescroll table tfoot tr{
                 position:relative;
                 bottom:expression((this.parentElement.parentElement.offsetHeight -             this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop-1) + "px");
}
div.tablescroll{        
                    overflow:auto;
                 height:100%;
                 width:100%;
}

В итоге thead и tfoot неподвижны, а тбоди скроллится. Вариант только для IE.
Варианты для других браузеров можете посмотреть в плагинах для jQuery.

Это сообщение отредактировал(а) mifkys - 23.10.2009, 14:01

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »