Question

我有一张桌子上有一些tds有一些div。我想在这个表上设置一个恒定的高度，而不管表的内容如何。所以滚动只有在达到那个高度后才会出现。我不想拥有任何父容器。 Fiddle

<table style="height:20px;overflow:scroll;" id="tbl1"'>

Answer 1

你不能限制表格，将你的表格包裹在div try

中

fiddle

<div style="height:150px;overflow:auto">
<table style="height:20px;overflow:auto;" id="tbl1"' >
<tr>
<td>

Answer 2

尝试设置＆＃34;显示：块＆＃34; （或＆＃34;内联块＆＃34;）在你的桌子上。我还将高度改为100px（20不够），宽度改为＆＃34; auto＆＃34;。 Updated sample in Fiddle

<table style="height:100px;width:auto;overflow-y:scroll;display:inline-block" id="tbl1"' >

Answer 3

表格不响应overflow属性，因此您需要使用父div来包装您的内容。这适用于旧式表和使用CSS构建的表。

查看这个jsfiddle：http://jsfiddle.net/fT8yu/14/

.wrapper {
    height 100px;;
    max-height: 100px;
    overflow-y: scroll;
}
.table {
   display: table;
}
.cell {
    display: table-cell;
    height: 80px;
    width: 50px;
    background-color: red;
    float: left;
    margin: 5px;
}


<div class="wrapper">
    <div class="table">
        <div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
        <div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
        <div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
    </div>
</div>

表格高度未设定为给定值

3 个答案: