Таблица со скроллбаром

[Светлана Гр.]

Здравствуйте!

Нужно сверстать такую таблицу со скроллбаром.

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

HTML:

<section class="prop_2">
					<h3>Вес и количество:</h3>
						<div class="sectionInner2">
							<div class="sectionInner">
								<div class="detailsProp">
									<div class="detailsPropHeader">
										<div class="detailsPropRow">
											<div class="detailsPropCell">Размер</div>
											<div class="detailsPropCell">Цена</div>
											<div class="detailsPropCell">Количество</div>
										</div><!--/.detailsPropRow-->
									</div><!--/.detailsPropHeader-->
									<div class="scroll-pane1">
										<div class="detailsPropRow">
											<div class="detailsPropCell">5 кг</div>
											<div class="detailsPropCell">1000 р.</div>
											<div class="detailsPropCell">5</div>
										</div><!--/.detailsPropRow-->
										<div class="detailsPropRow">
											<div class="detailsPropCell">15 кг</div>
											<div class="detailsPropCell">2000 р.</div>
											<div class="detailsPropCell">31</div>
										</div><!--/.detailsPropRow-->
										<div class="detailsPropRow">
											<div class="detailsPropCell">10 кг</div>
											<div class="detailsPropCell">1500 р.</div>
											<div class="detailsPropCell">10</div>
										</div><!--/.detailsPropRow-->
										<div class="detailsPropRow">
											<div class="detailsPropCell">5 кг</div>
											<div class="detailsPropCell">500 р.</div>
											<div class="detailsPropCell">1</div>
										</div><!--/.detailsPropRow-->
									</div><!--/.scroll-pane-->
								</div><!--/.detailsProp-->
							</div><!--/.sectionInner-->
						</div><!--/.sectionInner2-->
				</section><!--/.prop_2-->

CSS:

.detailsProp{
	display:table;
	width:100%;
	font-size:14px;
}
.detailsProp .scroll-pane1{
	display:table-row-group;
	max-height:100px;
	overflow:auto;
}
.detailsPropHeader{
	display:table-header-group;
	background:#e0e4e5;
}
.detailsPropRow{
	display:table-row;
}
.detailsPropCell{
	display:table-cell;
	padding:13px 16px;
}
.detailsPropHeader .detailsPropCell{
	padding:8px 16px 9px;
}

Edited April 4, 2013 by Светлана Гр.

[Switch74]

не припомню, чтобы у table-row-group был скроллинг,

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

[Светлана Гр.]

не припомню, чтобы у table-row-group был скроллинг,

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

Да, я думала об этом.

[Zippovich]

сделайте 2 блока, в верхнем титлы, в нижнем контент

для нижнего делайте скролл, я обычно использую scrollpane