On Thu, Mar 8, 2012 at 1:22 PM, David Thorp <mailingli...@allaboutabundance.com> wrote: > 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 can't even begin to make sense of that mess of deeply nested tables at your site. This is one of the drawbacks of using tables for layout. It's hard for others to understand your code and will probably even be hard for you to understand it if you return to it in the future after not working on it for a while. I managed to put together a very simple demo of the effect you're looking for: http://www.ghodmode.com/testing/dthorp/zstripes/ It uses a background image like in your second idea, but it sets the background on both the table and its container. This demo solves the problem of changing row heights using the CSS3 property background-size. This way you only have to make changes in your CSS if you change the row height. Unfortunately, this isn't supported in IE8 or earlier. While we're relying on CSS3, it occurs to me that we should be able to implement this without using images at all if we use a CSS3 gradient with several color stops. I haven't tried it yet, though. You can support most browsers with a fixed height and line-height that matches the height of a row in your background image, but like you already noted, you would have to change the image if you changed the height of a row. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com > 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. > > 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. > > Each of these has issues, or is potentially pretty complicated, and I keep > telling myself surely there's an easy way to do this. > > Logically I just think there should be some way to create a table with an > indeterminate number of rows and that just grows automatically (by increasing > the number of rows, not by increasing the height of each row) to fill the > available space, kinda like an image set to repeat does. > > Has anyone ever done something like this before, and is there an easy way to > do it that I'm missing? > > Thanks! > David. > ______________________________________________________________________ > 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/ ______________________________________________________________________ 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/
