прокруткой TBODY со всеми другими элементами фиксированной

Question

Jsfiddle

Я пытаюсь держать header, thead и footer элементы исправлен. Когда дополнительные элементы добавляются внутри tbody, и он переполняется, только tbody должен получить полосу прокрутки.

Я пробовал установить overflow недвижимость для tbody, но это не работает. Как я могу достичь желаемого эффекта?

tbody { 
    overflow: auto; 
} 

Answer 1

Установка display: block;, точная высота и overflow: scroll, кажется, сделать трюк. Вы можете проверить это fiddle. Мне также пришлось прокомментировать ваш оператор hide, чтобы показать остальные строки.

tbody { 
    overflow: scroll; 
    height: 140px; /* height that you want the tbody to remain */ 
    display: block; 
} 

------ EDIT

Хорошо, сделал реструктурировать подхода. С некоторым фиксированным позиционированием на верхнем и нижнем колонтитулах и компенсацией для этих высот с полями для вашего стола это похоже на то, что вы ищете. Направляйтесь на this fiddle и давайте посмотрим, приблизились ли мы к окончательному результату. : D

Answer 2

Привет я делаю все возможное с этим кодом: http://jsfiddle.net/UaYfW/52/

Проблема в том, нужно установить width на tdth, чтобы сделать их пригодными. Но вы можете сделать это с%.

Редактировать

Что я один на один из файлов:

HTML ----- Сделайте div Arround таблицы с классом inner

CSS ---- - Добавить это свойство

.inner { 
    width:100%; 
    overflow:auto; 
} 
.table td:first-child { 
    width:15%; 
} 
.table td:last-child { 
    width:18%; 
} 

Я установил ширину для последнего и первого столбцов только для приложите его к голове.

JS ------ Добавить

var hinner=parseInt($('#wrap').css('height'),10)-198+"px"; 
$('.inner').css({ 
    'height': hinner, 
}); 

var $thead= $('.table thead').remove(); 
$('header').after("<table/>"); 
$('header').next().append($thead); 
$('header').next().css ({ 
    'line-height' : '38px', 
    'width' : '100%' 
});