How to make a div with position:fixed occupy the entire parent width (and resize with it)?

See this fiddle: http://jsfiddle.net/eEe2C/2/

The green row 1 is fixed but does not stretch the entire parent width which the other blue rows do. Think of row 1 as the column headers in a grid. It needs to be fixed in order to be visible at all times and for all rows to "slide" underneath it when scrolling. The only difference between row 1 and the other rows is that row 1 has position:fixed.

When resizing horizontally开发者_运维问答, the "cells" of the blue rows expand just fine according to their width percentage. The "cells" of the green row ignores this (I know why, just need a solution).

How do I get the same stretching behaviour for row 1 still keeping it fixed? The headers should of course be aligned with the data "cells". Please, no post-js hack if possible.

Edit: can't use tables as I'm using drag'n'drop sorting that doesn't play well at all with tables.

If I'm understanding it correctly, do you mean like this? Although you might want to set a specific width on the container.

http://jsfiddle.net/eEe2C/6/

Even though it's a demo, it looks like tabular data to me so just use a <table>. Using a table with a fixed height <tbody> might be a good solution to your problem.