当屏幕大小调整时，表格变为最大高度

我有一张生成的最小高度为300px，最大高度为650px的表格，这是完美的。唯一的问题是，当我调整窗口的大小时，表格将一直向下伸展，直到显示其所有值。它应该有一个滚动条，所以你可以在列表中移动，但是一旦屏幕被调整大小，滚动条就消失了，它只是在一个页面上显示表中的所有值。当屏幕大小调整时，表格变为最大高度

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>

来源

2015-06-15 Mr. Bond

表有一个内置的 “拉伸以适应” 的属性。

尝试把表格放在具有相同最大/最小高度和溢出属性的div中。

来源

2015-06-15 13:30:53

请使用表格标签填充表格并为其设置属性。将此表放入div标签内并将上面的css用于该div标签后。不适用于表格标签

来源

2015-06-15 13:32:50

请勿复制答案。改正投票正确的答案。 – DCdaz

@DCdaz这是有点不公平答案是相隔只有两分钟我不认为这可能是乔丹的答案在那里时，萨米开始写作 –

当屏幕大小调整时，表格变为最大高度

回答

相关问题