Question

我正在尝试修复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;
}

<强> ------修改

好的，对方法进行了重组。在页眉和页脚上有一些固定的位置，并为桌子的边距补偿那些高度，它似乎更接近你想要的。转到this fiddle，让我们看看我们是否接近最终结果。：d

Answer 2

我尽我所能使用此代码： http://jsfiddle.net/UaYfW/52/

问题是您需要在width td上设置th以使其合适。但你可以用％。

来做

修改

我在其中一个文件上做了什么：

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

可滚动的tbody，其他所有元素都已修复

2 个答案: