Wide Headers, Staggered with Narrow columns

[danv]

Trying to catch up on the latest CSS, and I was inspired by this article on responsive tables to try something I have needed for a while.

Some of the pages on my client’s site have tables with MANY columns, but worse the data is just numbers (0.00 – 9.99 two decimal places), but the headers are very long. Some of the headers may 20 or more characters long.

Normal table formatting make these tables very unreadable. What I want is to see the full headers staggered above scrunched together columns. Here is an ASCII example:

    Expert Level

|    Linear Level

|    |    Spiral Level

|    |    |    Transitory Level

1.00 1.00 1.00 1.00

1.00 1.00 1.00 1.00

1.00 1.00 1.00 1.00

1.00 1.00 1.00 1.00

1.00 1.00 1.00 1.00

I have given it a try but there are some things I cannot think of how to do. For example, I would like a vertical bar dropping down from the left edge of each header to the column it belongs to (as sort of illustrated above). Also, I thnk the CSS could probably be made more generic. But, I am not fully up to speed on the very latest CCS capabilities (I’m working it ;-)

I have put an EXAMPLE ONLINE where it can be viewed and played with.

Oh, just for the heck of it the CSS will change formatting to normal if the screen is more that 1024px. As shown in the ONLINE EXAMPLE it is “scrunched” in less than 1024px. You can drag the vertical bar in the middle of the page to the left to make it pop out into normal formatting.

Hope someone out there can help refine this!

Thanks!

DanV

P.S. I am using a simple table, but here is the fancy part of my CSS:

@media screen and (max-width:1024px) {

/* OK, lets see if we can make wide headers if width less than 1024 (ARBITRARY) */



thead,th,tbody {

display: block;

}



th {

position: relative;

}



/*

not sure if my calucations are correct

would like to do this "relatively"

cell = 30 + 2 * 3 + 2 * 1 = 38

*/                                  /* ((pos - 1)  * cell) */

th:nth-of-type(1) { left:   0px; }  /*   0                 */

th:nth-of-type(2) { left:  38px; }  /*  38                 */

th:nth-of-type(3) { left:  76px; }  /*  76                 */

th:nth-of-type(4) { left: 114px; }  /* 114                 */

}

[p3aul]

want it more readable? Get rid of the black background!

[danv]

@p3aul,

the black background is this forum’s way to show code…

[Author]

Posts