Jquery 设置表'；人体高度

我正在尝试固定桌子的身体高度并使其可滚动。基本上我有三张桌子，其中两张我想放在上面，并排，第三张应该在下面。 我想固定桌面高度（比如说300px），但我无法实现这个效果。我尝试了各种方法，但大多数都破坏了表的布局外观。 这是我的密码-

<div id="DashboardTab" style="display: table-layout;">
            <div style="display: inline-block; width: 100%;">
                <div id="" style="float: left; width: 50%; ">  
                    <legend>Planned</legend>
                    <table id="ePlanned"">
                        <thead>
                            <tr>
                                <th>Col1</th>
                                <th>Col2</th>
                                <th>Col3</th>
                                <th>Col4</th>
                            </tr>
                        </thead>
                        <tbody><!-- style="height: 300px; overflow: auto">--><!--tried this and other ways but not working-->
                            <tr>
                                <td>MX1</td>
                                <td>MX2</td>
                                <td>MX3</td>
                                <td>MX4</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div id="" style="float: right; width: 50%;">
                    <legend>Closed</legend>
                    <table id="eClosed" >
                        <thead>
                            <tr>
                                <th>Col1</th>
                                <th>Col2</th>
                                <th>Col3</th>
                                <th>Col4</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div id="" style="display: inline-block; width: 100%; overflow: auto;">
                <legend>Stats</legend>
                <table id="uStats" class="display" cellspacing="0" width="102.5%">
                    <thead>
                        <tr>
                            <th>Col1</th>
                            <th>Col2</th>
                            <th>Col3</th>
                            <th>Col4</th>
                            <th>Col5</th>
                            <th>Col6</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

计划
您必须在
overflow:auto
上为每个表设置包装
div
，并为每个表设置固定的
高度

这是一个可能的解决方案：



计划
可乐
可乐
可乐
可乐
MX1
MX2
MX3
MX4
MX1
MX2
MX3
MX4
MX1
MX2
MX3
MX4
MX1
MX2
MX3
MX4
关闭
可乐
可乐
可乐
可乐
MX1
MX2
MX3
MX4
MX1
MX2
MX3
MX4
MX1
MX2
MX3
MX4
统计数据
可乐
可乐
可乐
可乐
可乐
可乐6
MX1
MX2
MX3
MX4
MX1
MX2
MX3
MX4
MX1
MX2
MX3
MX4
MX1
MX2
MX3
MX4
MX1
MX2
MX3
MX4
使用display:flex。它使您的工作更轻松


仪表板选项卡{
显示器：flex；
利润率：20px；
}
.项目{
宽度：50%；
边框：1px纯黑；
利润率：10px；
}
#仪表板选项卡表{
}
#仪表板选项卡表，
tr，
运输署{
边框：1px纯黑；
利润率：20px；
}
#表3{
显示器：flex；
边框：1px纯黑；
证明内容：中心；
}
#表3分区{
弹性收缩：1；
宽度：100%；
溢出：自动；
利润率：50像素；
}
#表3，
tr，
td{}

计划
可乐
可乐
可乐
可乐
MX1
MX2
MX3
MX4
关闭
可乐
可乐
可乐
可乐
统计数据
可乐
可乐
可乐
可乐
可乐
可乐6
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
在这里，您将div放入可滚动块中，这不是我的目标，基本上我只是希望表体可以滚动。每次列属性应该是可见的，这在您的案例中是不存在的。我希望表占用一半的空间，这在您的答案中是不存在的，我已经尝试过了。我想通过创建相同大小的表格使我的页面看起来更好你是说所有的表格都应该占据一半的空间