1

I'm trying to create a responsive column table but I would also like to include the relevant header with each column.

At the moment with the CSS:

@media all and (max-width:500px){
   table{
      width:100%;
   }

   td{
      display:block;
      width:100%;
   }

   tr{
      display:block;
      margin-bottom:30px;
   }
}

I get what it is solved on Responsive table by columns

However my full "row" of th inside my thead is still displaying as a normal row and I would like it to be split by column as well.

Is there any way I could achieve that?

Community
  • 1
  • 1
Carlos Torrecillas
  • 4,965
  • 7
  • 38
  • 69
  • You haven't defined any css. – Mistergreen Sep 04 '15 at 20:40
  • Do you mean this? http://jsfiddle.net/sjdjrm8m/8/ – AleshaOleg Sep 04 '15 at 20:54
  • Hi @AleshaOleg, I sort of mean that. My problem though is that I have a with one row representing the different column headers so ideally I would like to take the header + the full column as a whole. Does it make sense? Worse case is that I have to incorporate a new row in the body being that the header row? – Carlos Torrecillas Sep 04 '15 at 21:33
  • @CarlosTorrecillas can you show your code? – AleshaOleg Sep 04 '15 at 21:58
  • @AleshaOleg in the example you sent every Title1, Title2, Title3, Title4, does not move with its corresponding column and the way it collapses is not what I want. I'm going to paste some of my code to show what I have – Carlos Torrecillas Sep 07 '15 at 08:17
  • @CarlosTorrecillas ok, waiting for your code – AleshaOleg Sep 07 '15 at 08:23
  • OK, to show the example I have: http://jsfiddle.net/wckbLtm0/ I would like to have a group of Title1, r1c1, r2c1; Title2, r1c2, r1c2; Title r1c3 r2c3. However I can also see the grouping is done only by logical row. Maybe the structure I'm using is not the right one and should not be using table for this? – Carlos Torrecillas Sep 07 '15 at 08:25
  • Looks like a possible solution could be this: http://stackoverflow.com/questions/26090244/responsive-table-by-columns – Carlos Torrecillas Sep 07 '15 at 11:22

0 Answers0