CSS Challenge #2331

Rothgarr

I've got what I think is an impossible CSS-related task (well, impossible for me at least). I need to format the output of a list of records that is, say 8 columns wide. Each record is on its own row.

Each record row looks like:

| icon | icon | icon | Item Name | Item Alias | Mod Date | Mod Time | Mod User |

What I need to do is figure out how to format the display of the list of these records in a liquid layout setting. All the columns should be a fixed width except for the "Item name" column -- that's where the additional space can go if a page is dragged wide or the text can wrap if it is dragged narrow.

So basically, a typical output would look like:

| icon | icon | icon | Item Name | Item Alias | Mod Date | Mod Time | Mod User |
| icon | icon | icon | Item Name | Item Alias | Mod Date | Mod Time | Mod User |
| icon | icon | icon | Item Name | Item Alias | Mod Date | Mod Time | Mod User |
| icon | icon | icon | Item Name | Item Alias | Mod Date | Mod Time | Mod User |
| icon | icon | icon | Item Name | Item Alias | Mod Date | Mod Time | Mod User |
| icon | icon | icon | Item Name | Item Alias | Mod Date | Mod Time | Mod User |
| icon | icon | icon | Item Name | Item Alias | Mod Date | Mod Time | Mod User |
| icon | icon | icon | Item Name | Item Alias | Mod Date | Mod Time | Mod User |

where each row is a unique record. And columns also have to always line up as best as possible.

I tried formatting each record as a list, similar to how I'd format global navigation on a web site but I couldn't get the liquid layout to work. I also tried formatting each record not as a list, just with span tags around each chunk of the record but it also didn't work.

Is what I need to do even possible using CSS? Any pointers?

jclast

This is probably too basic to be right, but wouldn't setting the cell widths in the first row of everything but "Item Name" in terms of pixels but setting the width of the table as a percentage do the trick?

Not a CSS solution, but it's the first thing that comes to mind.

powerss

Dude, this is something where it's OK to use a Table. In fact, this is what tables are for

Rothgarr

Currently, I am using tables as jclast described, and it works fine. But the display sometimes has hundreds of rows. So it can take some time for it to display in the first place and it's REALLY SLOW when you change the width of the browser.

So I was hoping this would speed things up both initially and when resized. There are other reasons, too, I guess...

Seguer

Use a table and have pagination (page 1, 2, 3, etc), so you don't have 2331 records on one page. In terms of rendering (and re-rendering) time, can you post up the code?

Rothgarr

Unfortunately, I can't post the code because it's private info accessible to subscribers only...

But we do have pagination in some areas. For other areas the data simply must be displayed in its entirety for it to make sense and be of value...

I'm starting to think that we'll just have to keep it as tables. Maybe I can clean up the tables to make them more efficient.

But before I "give up" on the concept of building these with CSS... do you guys know if it's pretty much impossible to do what I describe above - ? - to have a list or non-list display occupy 100% where all the "columns" are fixed except for one?

Seguer

Lists pretty much don't like to work like that, from what I've read. alistapart has an article about two column lists.

Semantically you should be using tables anyway, to hold tabular data. You can use CSS to alter the look of the tables if that's what you're after.

In terms of code, if you could show us code with dummy data (so it just has the code without any sensitive information).

For the pagination, how many rows/records would this be displaying on one page a time?

Jasconius

You can still use tables, they aren't gone yet, in fact, thats what they are SUPPOSED to do, what you are describing.



If I had to do that using nothing but fluid layout, I'd shoot myself.


I'm sure there's a way, but I ain't good enough to just pull one of out my brain without a solid hour of trial and error.

typhoon

Use a table.

Using styled divs for tabular data is as kludgy and wrong as using tables for layout.

Janin

You've already been told to use a table, but I'd like to mention why. The reason CSS was touted as a replacement for tables was because designers were using tables, single-pixel transparent .gifs, and fixed-pixel dimensions for layout. Until CSS, that was the only way to do it.

Now that CSS is available, it no longer makes sense to use tables for non-table related layout. However, tables are still to be used for their original purpose of data arranged by row and column. You can use CSS to style the tables, if it'll make you feel better.

As for the original problem, look into the <col> and <colgroup> elements. They should allow you to set fixed widths on whatever columns you want.