Previous Message
Next Message

extra blank rows in table to fill window.

Sent by Markus Ernst on 8 March 2012 10:10


Am 08.03.2012 06:22 schrieb David Thorp:
> Hi all,
>
> Another question on my current project...
>
> Again, first, here's the code:
>
> 	http://www.davidthorp.name/testingstuff/browser-tables-2.html
> 	http://www.davidthorp.name/testingstuff/css/browser-tables-2.css
>
> Also look at this image for reference:
>
> 	http://www.davidthorp.name/testingstuff/FinderWindow.png
>
> So here's the thing.  That Finder list shows alternating table rows (white/light blue) regardless
of if there's any data in the row.  Empty table rows fill the window height if the window is larger
than the number of rows holding data.   I want the same effect in the list part of my page.
>
> Note that the container for the list is set to overflow, so a (vertical) scrollbar appears if the
window is too small (vertically) for all the rows with data to appear.  But any solution we come up
with for displaying the "empty" rows when the window is taller than the data needs to ensure no
scroll bar appears then.
>
> I've thought of a couple of ways I might accomplish this.
>
> 1. put another table behind the data one, with the same settings but no data in it.  This could be
a very large number of rows.  Trouble is the presence or existence of the scroll bar is defined by
the overflow setting of the container object, and since both tables (the one with data and the one
with empty rows) are in the same containing object I can't win.  I'm trying to get my head around
the idea that maybe I can somehow have two container objects with different overflow settings, but
that's starting to do my head in and I'd like to see if there are any other common/recognised
methods of achieving this.

This is going to be very hard. I'd rather try to use jQuery to add rows 
to the table until the bottom is reached (which is off topic in this 
list; maybe you could find help on this approach in a javascript or 
jQuery forum).

> 2. I could create a small jpeg that looks like two blank rows of the same table and set it to
repeat.  But then if I decide to change the row height of the table rows for the data list, then I
have to put in a different image, and that'll just get messy.

Maybe you could experiment with background-size:
http://www.w3.org/TR/2012/WD-css3-background-20120214/#the-background-size

As I understand it, something like this should theoretically go in the 
direction you want:

.list {
   background-image: url(background.png);
   background-size: auto 2.4em;
}
td {
   height: 1.2em;
   vertical-align:middle;
}

Anyway I haven't tested this, and I have no idea about the actual 
browser support of background-size. And any background-image related 
solution has of course the downside that it will break if there are 
entries with multiple lines in the table.

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: