Table 调整屏幕大小时达到最大高度

Question

我有一个 table，生成的最小高度为 300 像素，最大高度为 650 像素，非常完美。唯一的问题是，当我调整 window 大小时，table 将一直向下延伸，直到显示其所有值。它应该有一个滚动条，这样您就可以在列表中移动，但是一旦调整屏幕大小，滚动条就消失了，它只在一页上显示 table 中的所有值。

CSS:

#tblPropertyGrid
{
    width: 250px; 
    min-height: 300px; 
    max-height: 650px; 
    font-size: 10px;
    overflow: scroll;
    margin-left:15px; 
}

HTML:

<div class='row'>
    <div class='thirdDiv' id="tabProperties">
        <script type="text/javascript">
                $(document).ready(function() {
                    $('#tblPropertyGrid').handsontable({
                        colHeaders: ["Name", "Value"],
                        colWidths: [115, 115],
                        maxCols: 2,
                        startCols: 2,
                        multiSelect: false,
                        afterSelectionEnd: function(row1, col1, row2, col2) {
                            $('.handsontableInputHolder').css('left', '114px');
                            $('.handsontableInputHolder').css('top', $('.htCore:first').children('tBody:first').children('tr')[row1].offsetTop + 'px');
                        },
                        afterChange: function(changes, source) {
                            if (changes != null && source == 'edit' && gridFilled)
                            {
                                var row = changes[0][0];
                                var col = changes[0][1];
                                var table = $('#tblPropertyGrid').handsontable('getInstance');
                                var currentItem = $(table.getCell(row, col));
                                var originalHTML = currentItem.html();
                                currentItem.html("EDITING...");

                                $.ajax({
                                    url: '@Url.Action("EditProperty", "Home")',
                                    type: "POST",
                                    data: { ID: Object.keys(selectedSections)[$(selectedSections).size() - 1], PropertyName: table.getCell(row, 0).innerHTML, NewValue: changes[0][3] } ,
                                    async: true
                                }).done(function(result) {
                                    if (result == "True")
                                    {
                                        currentItem.html(originalHTML);
                                        currentItem.css('background', 'lightgreen');
                                        currentItem.animate({backgroundColor:"white"}, 1500);
                                    }
                                    else
                                    {
                                        currentItem.html(originalHTML);
                                        currentItem.css('background', '#FF5959');
                                        //currentItem.animate({backgroundColor:"white"}, 1500);
                                    }
                                });
                            }
                        }
                    });

                    var table = $('#tblPropertyGrid').handsontable('getInstance');

                    while (table.countRows() > 1)
                    {
                        table.alter('remove_row', 1);
                    }

                    table.getCellMeta(0, 0).readOnly = true;
                    table.getCellMeta(0, 1).readOnly = true;

                    //Should show btnAdd?
                    if (GetURLParameter('id') != null)
                        $('#btnAdd').prop('disabled', false);
                    else
                        $('#btnAdd').prop('disabled', true);
                });
        </script>
        <h2 style="font-size: 14px;margin-top:20px" href="#tabProperties">Properties</h2>
        <div id="tblPropertyGrid"></div>
    </div>

Answer 1

表格内置属性个 "stretch to fit"。

尝试将 table 放入具有相同 max/min 高度和溢出属性的 div 中。

Answer 2

请使用 table 标记填充 table 并为其设置属性。在此之后将 table 放入 div 标签中，并在 css 上方使用该 div 标签。不适用于 table 标签

Table 调整屏幕大小时达到最大高度

Table goes max height when screen is resized

html

javascript

css

ajax

css-tables