overflow:auto属性只添加一个水平滚动条?

时间:2016-08-03 12:27:45

标签: css

我[不幸]在桌子里面有一张桌子。外表的最后<td>看起来像这样:

<td class="valign-top width-40 padding-right-4px">
    <div class="grid-filter-container" style="overflow:auto;">
        <table id="FilterColumns" class="fullwidth fimscaletable">
            <thead>
                <tr>
                    <th class="width-25 textalign-left k-header k-grid-header">
                        <span class="text-white">Field Name</span>
                    </th>
                    <th class="width-75 textalign-center k-header k-grid-header">
                        <span class="text-white">Condition</span>
                    </th>
                </tr>
            </thead>
            <tbody></tbody>
            <tbody></tbody>
        </table>
    </div>
</td>

内部表以编程方式获取添加到其中的行,它是数据导出模块的一部分。向用户显示左侧的字段列表,然后他们可以从列表中选择它并设置一些参数并将其添加到右侧的此表中。

如您所见,包含内部表的<div>将其overflow属性设置为auto。但是在运行时它只会“获得”一个水平滚动条:

enter image description here

右边的表格与左边的控件大小相同,但是当我为它添加更多条件时,它的高度会增加。我希望它只是滚动div。注意这个截图是在IE中拍摄的;尚未测试其他浏览器。

grid-filter-container类定义如下:

.k-window .grid-filter-container {
    border: solid 1px #909090;
    min-height: 200px;
    padding: 0px;
    margin: 0px;
}

js fiddle实际上是被我公司的互联网过滤器所阻止,否则我会尝试提供样品。

1 个答案:

答案 0 :(得分:1)

为容器添加高度

.k-window .grid-filter-container {
 border: solid 1px #909090;
 min-height: 200px;
 padding: 0px;
 margin: 0px;
   height: 200px;
}