css - 固定所有其他元素的可滚动 tbody

Question

提琴手

我试图保持header、thead和footer元素固定。当在里面添加额外的元素tbody并且它溢出时，只有tbody应该得到一个滚动条。

我尝试为 设置一个overflow属性tbody，但它不起作用。我怎样才能达到预期的效果？

tbody {
    overflow: auto;
}

Answer 1

设置display: block;，精确的高度，overflow: scroll似乎可以解决问题。你可以看看这个小提琴。我还必须评论您的隐藏语句以显示其余行。

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

- - - 编辑

好的，对方法进行了重组。在您的页眉和页脚上进行一些固定定位，并通过表格边距补偿这些高度，它似乎更接近您正在寻找的内容。继续看这个小提琴，让我们看看我们是否更接近最终结果。:D

Answer 2

嗨，我用这段代码尽力而为：http: //jsfiddle.net/UaYfW/52/

问题是您需要设置anwidth以使它们适合。但是你可以用 %.tdth

编辑

我对其中一个文件执行的操作：

HTML -----div用班级围成一圈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%'
 });