I agree, the nested tables are not great, but I hit all sorts of problems trying to do it with divs and floats, and while I had a couple of helpful tips from people on this list about that I haven't got my head quite around them yet. A couple of people suggested it's not so bad to do it in tables, but I'd still like to do it without them. So I'll be returning to that particular goal later.
In the meantime, thanks for your demo, although that doesn't really achieve what I'm trying to achieve. The purpose is for each row of the table to be alternating colors. It's not just a pretty pattern to sit behind the table. Maybe you're onto something with the CSS3 gradient idea. Perhaps the ideal solution would be somehow programmatically generating the background "image" to match the row height. Perhaps I'll look into that. Any thoughts? David. On 08/03/2012, at 9:23 PM, Ghodmode wrote: > 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/ ______________________________________________________________________ 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/
