Is it possible (and valuable) to layout a data table with GSS?

[drewbeck]

I'm trying to get GSS to layout a data table. I've tried a variety of approaches including using plain classes on my elements (.row, .cell) and using numbered classes with splats (.row1...10, .cell1...10). VFL. No VFL. I can't get it to work.

The standard table rules are what I'm looking for: rows stack vertically, cells horizontally. All cells within a column are the same width.

Is this possible? Perhaps more importantly: is this valuable? Am I better off using a combination of GSS and standard CSS/DOM flow?

I'm approaching this as someone who has long been frustrated by the lack of control over layout for data tables. The traditional methods fall down for me a fair amount in the work I do and I'd love more fine-grained control over how the table expands or contracts as the data and the window resizes.

[paulyoung]

@drewbeck would something like this work for you?

http://codepen.io/paulyoung/pen/QbpmQN?editors=110

[mudgie]

Hi Paul, you're a life saver, I've been trying to make a responsive grid without much luck and it looks like this will do the trick! Just a quick question (if you don't mind): how would I go about inserting this into a fluid width div rather than have it take up the whole window width? I've been trying, however if I set a width on it, it goes a bit bananas and positions itself in odd locations and stretches out the page.

[paulyoung]

I would probably use in(^#fluid) instead of in(::window).

You might need to make the fluid div have position: relative;.

Also, be aware of #198.