jquery - 无法获取要调整大小的 Bootstrap 表

Question

我正在尝试调整 bootstrap 表的大小，以便最大内容高度为 200 像素，任何更大的内容都会滚动。

我将表格的 CSS 设置为:

table.jSpeeds tr:hover, table.jSpeeds tr td:hover{
  cursor:pointer;
}

table.table-fixed thead {
  width: 97%;
}
table.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}

& HTML:

<table class="table table-striped jSpeeds table-fixed">
    <thead>
      <tr><th>Time</th><th>Speed</th></tr>
    </thead>
    <tbody>
      <tr><td>TestRow</td><td>TestVal</td></tr>
    </tbody>
</table>

但是表格仍然是页面的高度和宽度。我想知道是否有人可以提供帮助。

Please see the JSBin example here

谢谢。

Answer 1

使用 Bootstrap 的 responsive-table .包裹你的 <table>有了这个。

<div class="table-responsive fix-table-height">
    // your table here
</div>

然后添加类fix-table-height在 wrapper 上，这样您就可以定义 wrapper 的高度。在你的情况下你想要 200px; .所以你可以这样做:

.fix-table-height{
    max-height:200px;
}

这是输出 jsFiddle