Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Скрол таблицы


Автор: Reptor 21.8.2006, 12:56

Был в разделе 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
Не понял...
Надо чтобы заголовок был статичен и у таблицы был отдельный скроллинг?

Автор: Reptor 21.8.2006, 13:04
Illuminaty, да совершенно верно

Автор: Illuminaty 21.8.2006, 13:37
Попробуй так:
Код

<!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
Illuminaty, спасибо классно работает. Но есть одно но в таком примере как ты дал заголовок тоже должен иметь 2 ячейки. Тоесть это как одна целая таблица

Автор: Reptor 21.8.2006, 17:59
неужели решения как такового нет? и ещё как зделать прокрутку по горизонтали?

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

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

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

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

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)