table-cell - some kind of colspan?

Question

I am a bit puzzled right now, because I had CSS code that worked, but it wasn\'t beautiful at all. I now want to rework this CSS styles and build them via LESS. And I have b

Answer 1

The table-caption is a good idea if you need header and footer row regardless of columns width... The absolute positioning works great except when your text is line-feeding at least once more than other cells in that row...

So here's a pseudo solution to have header in between rows of a responsive table and be sure to have line-feed according to the table header content (which is important if the table is populated dynamically). I've also included a sort of colspan as well (although not line-feeding accurately) :

CSS :

.table
{   display:table;
    position:relative;
}
.table > .header
{   display:table-caption;
    position:absolute;
    left:0;
    right:0;
}
.table > .l50{right:50%;}
.table > .r50{left:50%;}

.table > .row{display:table-row;}

.table > .row > *{display:table-cell;}

/* We add an extra cell where neededed to allow or header repositioning using % instead of fixed units */
.table > .header + .row > :last-child
{   width:1%;
    max-width:1px;
    overflow:hidden;
    visibility:hidden;
}

.table > .header + .row > :last-child > div
{   float:left;
    display:inline;
    visibility:hidden;
    width:10000%;/* 100% = parent element width (1%) ⇒ 100*100% = gran-parent element width*/
}
.table > .header + .row > :last-child > div > .l50
.table > .header + .row > :last-child > div > .r50{width:5000%;}

/* No responsive line-feed thought it's possible using % to estimate the size the span should take but it's not accurate (see HTML render) */
.table > .row > div > .span{position:absolute;left:0;right:33%;}
/* THIS MAKES SURE TRADITIONAL CELLS ARE VISIBLE */
.table > .row > .top
{   position:relative;
    z-index:1;
}

http://jsfiddle.net/sp2U4/