Я предполагаю, что вы пытаетесь сделать фиксированный заголовок и прокручивать содержимое тела. Вы можете прокручивать контент в 2 направлениях:
- по горизонтали: вы не сможете прокручивать контент по горизонтали, если не используете слайдер (например, слайдер jQuery). Я бы рекомендовал в этом случае не использовать стол.
- по вертикали: вы не сможете добиться этого с помощью
tbody
тега, потому что назначение display:block
или display:inline-block
нарушит макет таблицы.
Вот решение, использующее divs
: JSFiddle
HTML:
<div class="wrap_header">
<div class="column">
Name
</div>
<div class="column">
Phone
</div>
<div class="clearfix"></div>
</div>
<div class="wrap_body">
<div class="sliding_wrapper">
<div class="serie">
<div class="cell">
AAAAAA
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
BBBBBB
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
CCCCCC
</div>
<div class="cell">
3435656
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
CSS:
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}
/**
* @info Clearfix: clear all the floated elements
*/
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {display:inline-table;}
/**
* @hack Display the Clearfix as a block element
* @hackfor Every browser except IE for Macintosh
*/
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
Объяснение:
У тебя есть sliding wrapper
который будет содержать все данные.
Обратите внимание на следующее:
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
Разница в 17 пикселей, потому что нам нужно учитывать ширину полосы прокрутки.