Grow your CSS skills. Land your dream job.

Wide Headers, Staggered with Narrow columns

  • # April 23, 2012 at 4:25 pm

    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!



    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 */
    # April 23, 2012 at 4:50 pm

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

    # April 24, 2012 at 11:52 pm


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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".