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

Question

Jsfiddle

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

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

tbody {
    overflow: auto;
}

Answer 1

您好，我会尽力使用以下代码: http://jsfiddle.net/UaYfW/52/

问题是您需要在 td 和 th 上设置 width 以使它们适合。但是你可以用 % 来做到这一点。

编辑

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

HTML ----- 用类 inner 在 table 周围创建一个 div

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%'
 });