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 [css-d@lists.css-discuss.org]
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/
