[html5] table with fixed headers

[Larry Martell]

On Thu, Jul 3, 2014 at 1:28 PM, Frank Hellenkamp <jonas at depage.net> wrote:
> Hi Larry,
>
>> Larry, I have seen several people attempt to achieve what you are trying
>> to do, but I've never seen a solution that didn't involve fixed column
>> widths.
>>
>> Not to say it's impossible.
>
> IF (and only if) the column headlines are always smaller than the
> content inside (so that they don't have to stretch the table cells), it
> seems possible:
>
> http://jsfiddle.net/34Fd5/28/
>
> Notice the additional <span> around the headers with absolute positions,
> the extra container, to keep the relative-root outside of the
> scrollcontainer, and the fake background to outside of the table content.
>
> You cannot center or right align the header titles though, because it
> would destroy our positioning.

Frank, thanks a lot for taking the time to put this up. Looked good at
first and I was very psyched as I'm much rather have a pure CSS
solution then having to use javascript. But I found that if the data
in the cells is long then the alignment is lost, e.g.:

http://jsfiddle.net/64URw/

I think the only way a solution will work for me is if it does not use
'display: block;'