Скролл тела таблицы

Статус
Закрыто для дальнейших ответов.
Chris

Chris

Well-Known Member
Регистрация
23.04.2012
Сообщения
68
Доброго времени суток! Столкнулся с необходимостью реализовать таблицу со скроллом в теле таблицы (календарь). Почитал форумы, нашел пример обернуть таблицу в див, но тогда и шапка тоже будет задействована. Думал может задать width и overflow tbody, не помогло. Нашел еще такой пример http://www.imaputz.com/cssStuff/bigFourVersion.html, но тут как я понял, задействован js, этого бы не хотелось.

Код: 
<table>
<thead>
<tr>
<th></th>
<th colspan="31">месяц</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td> - так до 31 числа
</tr>
<tr>
<td>Заголовок 1</td>
<td></td> - 31
</tr>
<tr>
<td>Заголовок 1</td>
<td></td> - 31
</tr>
<tr>
<td>Заголовок 1</td>
<td></td> - 31
</tr>
</tbody>
</table>
Может есть в закладках интереснаяя информация на эту тему, буду благодарен.
 
Volter9

Volter9

defined('SURRENDER') or die(); // StarWars
Регистрация
27.05.2012
Сообщения
1 145
В ссылочке которою вы дали, написанно что это реализованно на чистом CSS.

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

Далее второю кладете в див а ему, фиксед ширину и высоту, также оверфлоу хидден.

Надеюсь помогло.
 
Indev29

Indev29

Just Code...
Регистрация
15.08.2012
Сообщения
370
JScrollPane посмотрите. Плагин Jquery для создания прокрутки элемента.
 
Volter9

Volter9

defined('SURRENDER') or die(); // StarWars
Регистрация
27.05.2012
Сообщения
1 145
Вам не нужен JS, там используется JS только для таблицы, что б сделать так сказать "зебру", первая серая, вторая темно серая, третья серая и т.д.

Вот тот же самый пример на самом чистом css:

HTML:
Код: 
<table class="table">
   <thead>
    <tr class="norCell">
	 <td>Some Header</td>
	 <td>Some Header#2</td>
    </tr>
   </thead>
   <tbody class="scrollable">
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
    <tr class="norCell">
	 <td>Some Text</td>
	 <td>Some Text#2</td>
    </tr>
   </tbody>
  </table><!-- Большая таблица для теста -->
CSS:
Код: 
table.table {
    width: 700px;
    float: left;
    background: #999;
    border-collapse: collapse;
    border: 1px solid #222;
   }
  
   tbody.scrollable {
    display: block;
    height: 262px;
    overflow: auto;
    width: 100%;
   }
  
   tr.norCell {
    display: block;
   }
  
   tr.norCell th,tr.norCell td {
    width: 350px;
   
   }
  
   tbody tr.norCell td {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
   }
  
   thead tr.norCell {
    color: #000;
    background: #eee;
   }
 
Chris

Chris

Well-Known Member
Регистрация
23.04.2012
Сообщения
68
К сожалению, ничего не помогло, не появляется горизонтальная прокрутка. Выяснил еще один момент, заголовок в теле таблицы тоже двигаться не должен. Это можно сделать?

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

Код: 
<table class="head" cellspacing="0">
	    <thead>
		 <tr>
		  <th class="first"></th>
		  <th>октябрь</th>
		 </tr>
	    </thead>
	   </table>
	   <div class="table">
	    <div class="left fleft">
		 <span class="subject"></span>
         <span class="subject">Заголовок</span>
		 <span class="subject">Заголовок</span>
		 <span class="subject">Заголовок</span>
	    </div>
	    <div class="right fleft">
		 <table class="calendar">
		  <tbody>
		   <tr>
		    <td>1</td>
		    <td>2</td>
		    <td>3</td>
		    <td>4</td>
		    <td>5</td>
		    <td>6</td>
		    <td>7</td>
		    <td>8</td>
		    <td>9</td>
		    <td>10</td>
		    <td>11</td>
		    <td>12</td>
		    <td>13</td>
		    <td>14</td>
		    <td>15</td>
		    <td>16</td>
		    <td>17</td>
		    <td>18</td>
		    <td>19</td>
		    <td>20</td>
		    <td>21</td>
		    <td>22</td>
		    <td>23</td>
		    <td>24</td>
		    <td>25</td>
		    <td>26</td>
		    <td>27</td>
		    <td>28</td>
		    <td>29</td>
		    <td>30</td>
		    <td>31</td>
		   </tr>
		   <tr>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		   </tr>
		   <tr>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		   </tr>
		   <tr>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		   </tr>
		  </tbody>
		 </table>
	    </div>
	   </div>
Код: 
table.head{
width:890px;
margin:10px 0 0;
border:1px solid #36140a;
border-bottom:none;
background:#f8eabb;
}
table.head th.first{
width:200px;
border-right:1px solid
}
div.table{
width:890px;
border:none;
}
div.table .left{
width:200px;
}
div.table .left span{
display:block;
}
div.table .right{
width:690px;
overflow:auto;
}
div.table .right table.calendar{
margin:0;
background:#f8eabb;
width:960px;
}
table.calendar td, table.calendar th{
border:1px solid #36140a;
}
table.calendar td.subject{
width:200px;
}
table.calendar td{
width:34px;
height:53px;
}
Получилось, осталось отладить :)
 
Chris

Chris

Well-Known Member
Регистрация
23.04.2012
Сообщения
68
npofopr сказал(а):
Вы для себя верстаете? или программисту?
календарь
Нажмите, чтобы раскрыть...
Программисту, такой календарь не подойдет. Есть заголовок у 3-х строк. У меня прокрадывалась мысль, что данный код может быть неудобным для дальнейшей работы, вы об этом говорите?
 
N

npofopr

Well-Known Member
Регистрация
03.08.2010
Сообщения
220
[member=Chris], ну да. Это надо у php'шников спрашивать. Или на чем там будет в дальнейшем программироваться.
Просто по-моему для календарей и прочего такого обыденного, есть какие то готовые шаблоны, я только не знаю, как они выводятся и строятся. А там уже стилизовать их.
Может я конечно ошибаюсь.
 
Chris

Chris

Well-Known Member
Регистрация
23.04.2012
Сообщения
68
Тут не обычный календарь, на нем отмечаны даты занятий. Но у программиста узнаю, спасибо ;)
 
N

npofopr

Well-Known Member
Регистрация
03.08.2010
Сообщения
220
[member=Chris],
ну если взять к примеру этот сайт, то там справа календарь выводится, как я скидывал, от бутстрапа. Ну и дни занятий можно хоть как отмечать, там подчеркиваются дни, когда были статьи.
 
mrlasking

mrlasking

$_GET['rich'] or die('trying');
Регистрация
22.05.2012
Сообщения
323
ТС, приведенный вами пример, работает без JS и используется для вертикальной прокрутки. Горизонтальную же прокрутку, силами одной таблицы, вы не сделаете, ибо ширина у всей таблицы одинаковая. Вариант как вы можете сделать: Внешняя таблица с ячейками заголовков и второй рядок слитый в одну ячейку. Внутрь ячейки помещаете div-обертку, в котором, собственно, будет "сидеть" вторая таблица со скролящимися материалами.

http://jsfiddle.net/6JkGG/13/
 
Статус
Закрыто для дальнейших ответов.

Онлайн статистика

Пользователи онлайн
0
Гости онлайн
24
Всего посетителей
24
Общее число может включать скрытых пользователей.

Статистика форума

Темы
10 933
Сообщения
64 093
Пользователи
12 697
Новый пользователь
House

Новые пользователи

Поделиться этой страницей

Верх Низ