(bear with this one. it takes a lot of non-CSS setup before I get to the actual CSS question)
I am working on a report-generating application that includes the ability to do nested subreports. For example, suppose the user defines the following reports: Report 1: Pets. Displays Name, Kind of Animal Report 2: Kids: Displays First Name, Last Name, Age. Includes Report1 as a subreport (i.e. to show the pets for each kid found) Report 3: Adults. Displays First Name, Last Name, Age Includes Report3 as a subreport (i.e. to show the kids for each adult found) The output might look something like this: http://home.comcast.net/~rob.freundlich/css/report.html (very crude formatting for now, but it should give the general idea). If you look at the source for the link, you'll see lots of nested tables. I don't think that's a conceptual problem here, since I'm displaying tabular data. However, there's a *HUGE* practical problem with it: Internet Explorer (6.0) doesn't render table rows as it receives them, even if I use "table-layout: fixed". In the example I give above, it's not noticeable, since it's a small, pre-generated file. However, my app might be generating hundreds or thousands of rows, each of which might have a deep subreport or subreports, and it's pushing the data out to the browser as it renders, rather than waiting for the whole report to be completed before sending it to the browser. The intent there is to show the user results as they are generated; this gives the user a better feeling of responsivness, and can actually help them if the data they want is near the beginning of the report (because they don't have to wait for the full render). What I've noticed, though, is that even if I've pushed (for example) rows 1 - 10, IE might not yet be displaying them. I can see my app generating them (through internal logging), and if I View Source in IE, I see the data (so I know IE has received it), but IE steadfastly refuses to render them until it hits some blackbox state. So my user's experience is choppy and slow even if my app is smoothly producing data. OK, enough setup. On to the CSS questions. According to Microsoft's web site (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/re ference/properties/tablelayout.asp), using "table-layout: fixed" should cause the table to render one row at a time, instead of waiting for the entire table to be received. I have used table-layout fixed and fulfilled all of the conditions they specify in that article (not in the sample link I provided above, I know, but in my app I do it), and I still see the behavior I'm describing. It's definitely an improvement over waiting for the whole table, but it's *not* row-by-row as they state on their site. Since this application is being written primarily for IE 6, this is a problem for me, and I find myself wondering the reverse of the usual tables-vs-CSS question: is it possible to nicely present tabular data nicely without using tables? Well, of course it is. I could use DIVs for the rows and SPANs for the fields in each row, and define a class for each field, and end up with something like this: <div class="mainReport"> <div class="row"> <span class="col1">John</span> <span class="col2">Smith</span> <span class="col3">37</span> </div> <div class="row"> <div class="subReport1"> <div class="row"> <span class="col1">Rover</span> <span class="col2">Dog</span> </div> </div> </div> <div class="row"> <span class="col1">Bill</span> <span class="col2">Jones</span> <span class="col3">29</span> </div> </div> The problem with this, and the reason tabular data is best presented as tables, is that I have to give every span a class and then set up hierarchical styles such as "mainReport row col1 { css-for-col1-in-main-report }; mainReport col2 { sic }; subreport1 col1 { sic };" and so on. Definitely doable, but it adds a lot of metadata (compared to the table technique, where I can put formatting on th's, cols, or whatever, instead of each and every td. Another possibility in an ideal world would be to use adjacent-sibling selectors to specify CSS for the columns. But of course, since I'm targeting IE6, that's not an option for me. Can anyone offer an alternative? (note: if you can suggest a way to fix IE's table behavior, please respond to me off-list) Rob Freundlich "Males are biologically driven to go out and hunt giraffes." - Newt Gingrich "Some folks you don't have to satirize, you just quote 'em." - Tom Paxton ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
