使用垂直滚动将表格显示扩展到100％

Question

我有一个表格，我希望将高度限制为200px，如果表格的高度大于此值，则显示垂直滚动条。

在SO上搜索时，我发现此thread fiddle。

我将css应用于我的文件，并将类名scroll添加到表中。

不幸的是，表格没有展开以填充显示的宽度。

我如何克服这个问题？

我尝试了很多东西，但我没有想法。给table.scroll css类width: 100%;扭曲列！

这是我从线程/小提琴中获取的css代码：

table.scroll {
    /*text-align: center;*/
    margin: auto;
    margin-top: 20px;
}
table.scroll, table.scroll td, table.scroll th {
    border: 1px solid #8c8c8c;
}
table.scroll th {
    /*width: 100%;*/
}
table.scroll thead {
    display: block;
}
table.scroll tbody {
    display: block;
    max-height: 200px;
    overflow-y: scroll;
}
table.scroll thead th, table.scroll tbody td {
    width: 70px;
}

上面的css与我对测试页上其他表的表css进行交互：

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9
}
.table-striped>tbody>tr:nth-of-type(even) {
    background-color: #fff
}
.table-hover>tbody>tr:hover {
    background-color: #f5f5f5
}
table.tablesorter thead tr .header {
    cursor: pointer;
    cursor: hand;
    z-index: 1; /* used for placing the header behind the drop down menu */
}
table.tablesorter thead tr .header .arrow {
    width: 25px;
    height: 10px;
    display: inline-block;
    background: url(../img/tablesorter/whi-bg.gif) no-repeat center left
}
table.tablesorter thead tr .headerSortUp .arrow {
    background: url(../img/tablesorter/whi-asc.gif)
}
table.tablesorter thead tr .headerSortDown .arrow {
    background: url(../img/tablesorter/whi-desc.gif)
}
.table-no-bottom-margin {
    margin-bottom: -20px !important;
}

这是滚动表的html表格代码行：

<table id="resumes_saved_metadata_details_table" class="scroll table table-bordered table-striped table-hover table-condensed tablesorter table-no-bottom-margin">

这是表格与垂直滚动条不同的样子。这就是我希望显示表格列的方式：

这是表格的当前显示：