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

Reptor

Дата 21.8.2006, 12:56 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

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

Был в разделе Java Script посоветовали сюда обратиться вот с такой вот задачей:

Код


 <table>
<tr>
<td>

<table cellpadding="0" cellspacing="1" border="0" width="98%"  >

    [B]<tr>
        <td>ЗАГОЛОВОК</td>
    </tr>[/B]

    <tr>
        <td>ДАННЫЕ</td>
    </tr>
    <tr>
        <td>ДАННЫЕ</td>
    </tr>
.................................

    <tr>
        <td>ДАННЫЕ</td>
    </tr>
</table>

</td>
</tr>
</table>

ну так вот при скроле надо этот заголовок двигать. При такой структуре таблиц. Ну тоесть как бы скролл в таблице.

Illuminaty

Дата 21.8.2006, 13:03 (ссылка)

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

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

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

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

Reptor

Дата 21.8.2006, 13:04 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

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

Illuminaty, да совершенно верно

Illuminaty

Дата 21.8.2006, 13:37 (ссылка)

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

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

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

Попробуй так:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Скол таблицы</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body, html {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
}
.table_header {
    background-color: #CC9900;
    font-size: 3em;
    text-align: center;
}
.table_body {
    overflow: auto;
    height: 100px;
}
.table_body table {
    background-color: #FFFF99;
    border-collapse: collapse;
}
.table_body table td {
    border: 1px solid blue;
    text-align: center;
}
</style>
</head>
<body> 
<div style="width: 98%;"> 
  <div class="table_header">Заголовок</div> 
  <div class="table_body"> 
    <table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td>Бла</td> 
        <td>Бла</td> 
      </tr> 
      <tr> 
        <td>Бла</td> 
        <td>Бла</td> 
      </tr> 
      <tr> 
        <td>Бла</td> 
        <td>Бла</td> 
      </tr> 
      <tr> 
        <td>Бла</td> 
        <td>Бла</td> 
      </tr> 
      <tr> 
        <td>Бла</td> 
        <td>Бла</td> 
      </tr> 
      <tr> 
        <td>Бла</td> 
        <td>Бла</td> 
      </tr> 
      <tr> 
        <td>Бла</td> 
        <td>Бла</td> 
      </tr> 
      <tr> 
        <td>Бла</td> 
        <td>Бла</td> 
      </tr> 
      <tr> 
        <td>Бла</td> 
        <td>Бла</td> 
      </tr> 
    </table> 
  </div> 
</div> 
</body>
</html>

Reptor

Дата 21.8.2006, 14:10 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

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

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

Reptor

Дата 21.8.2006, 17:59 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

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

неужели решения как такового нет? и ещё как зделать прокрутку по горизонтали?

Reptor

Дата 22.8.2006, 19:10 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

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

зделал скролл вроде как везде всё работает. Только вот есть ещё одна проблема с ним. В ИЕ он отображается за таблицой тоесть рядом полоса со скролом а в Opera и Mozilla он как бы в таблице начинается под шапкой и из-за этого ширина ячеек шапки отличается от ширины ячеек контента. Как этого можно избежать?

UpL1nK

Дата 22.8.2006, 21:23 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 102
Регистрация: 3.12.2005
Где: Тюмень

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

добавь после ячейки шапки пустую ячейку с 2-я (или тремя) "&nbsp".
если я правильно понял smile

это для Оперы и Мазилы

Это сообщение отредактировал(а) UpL1nK - 22.8.2006, 21:25

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

Макс

Reptor

Дата 23.8.2006, 11:56 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

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

UpL1nK, это не помагает может есть какойто выход со стилями. Помогите всё перепробовал нечего не помагает

UpL1nK

Дата 24.8.2006, 22:58 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 102
Регистрация: 3.12.2005
Где: Тюмень

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

Скорей всего уже ничего не сделаешь, никакого стандарта, не дают работать W3C smile

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

Макс

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