Making a truly destop like table grid (how to show enough empty rows to fill the height of table grid)

Question

I'm really concerned about the aesthetic aspect of my web app and that's why I'm asking this sort of a silly question. Forgive me in advance if you think it's not that much a big deal.

I'm building a desktop like web app and using jqGrid awesome plugin to show some tabular data. In desktop applications like iTunes, the table has enough empty rows to fill its dimensions. I mean if you set table grid to be 500px in hight and it only has one row the table (zebra) will continue to the end of page. This is something that I want to have but can not accomplish right now using javascript or css.

My first idea was to make background image to the table that fake the empty rows but there are two problems for this method. First it will not work if the user zoom and make the text bigger and second I'm showing some borders between columns that are realizable which makes it impossible to replicate them in background image.

Does anyone have ever tried to make such kind of table grid? Any idea how to do it?

Answer 1

What I would do is simply create a Table container with a specific height; give it a vertically-tiled background; set overflow to scroll/auto; and then put the dynamically-sized table inside of it.

Edit: Sorry, I didn't read your question carefully enough. Given your other requirements, I would simply use JavaScript. It shouldn't be hard to set a minimum number of rows to your table, though I'm not familiary with jqgrid.

The other option is just to use 2 tables--the top one for the actual data, the bottom one for empty rows. Each time a row is added to the top table, one is removed from the bottom table, and vice versa. You'll also have to capture the column-resize events of the top table, and resize the columns of the bottom table as well. But this is pretty cludgy.