如何在HTML表格的最后一行的底部保留空白

Question

I have a HTML table that is dynamically filled with a Javascript/jQuery function. Sometimes the table contains 0 or 1 line, sometimes 800 lines.

Each line has a height of 15px. The table must always have a height of 800px even if there isn't enough lines to fill it. The only way I found to keep the same height for each line is to append blank lines after the last line. I don't like this solution because it makes the table very long and a useless scrollbar appears on the right.

I am using this plugin for my table : http://www.farinspace.com/jquery-scrollable-table-plugin/ It helps me to force my table height to 800px if there are 800 lines it makes the table scrollable.

Is there a solution for me to not append 50 blank lines if my table only contains one line?

Answer 1

I would suggest on document reeady function find the no of rows in your table and dynamically add the css height prop to the table .

check this demo code :

$(document).ready(function(){

  var numOfRows = $("#myTable > tbody > tr").length ;

  var eachLine = 15 ;

  var heightofTable = numOfRows * 15 ;

  $('#tableID').css('height',''+heightofTable +'px');

});

i think this can work .