Responsive vertical/horizontal heading table with toggle

Question

I have a table that has vertical and horizontal headings. I want to achieve that each row will be greouped together on mobile. Each row's heading will be the main title so to say and it would contain all the top heading with the corresponding row data.

 <table class="table"> <thead> <tr> <th class="empty"></th> <th>0-50</th> <th>0-75</th> <th>0-100</th> </tr> </thead> <tbody> <tr> <th>BMW M3</th> <td>4.2</td> <td>4.9</td> <td>5.7</td> </tr> <tr> <th>BMW M4</th> <td>4.1</td> <td>4.6</td> <td>5.4</td> </tr> <tr> <th>Mercedes AMG E63</th> <td>4.4</td> <td>4.9</td> <td>5.9</td> </tr> </tbody> </table>

This table would look like this:

BMW M3
-------
0-50 4.2
0-75 4.9
0-100 5.7
-------

BMW M4
-------
0-50 4.1
0-75 4.6
0-100 5.4
-------

Mercedes AMG E63
-------
0-50 4.4
0-75 4.9
0-100 5.9
-------

I don't want to solve this with predefined content before in css, since the tables will be dynamic. I don't mind if its a javascript/jquery solution - I tried with datatables, but didn't manage to get this kind of result.

Only 1 table can be used - using 2 tables and hide/show them is not an option in this case.

Answer 1

I propose you a solution with css and html.

You play with display as in DEMO below. For demo I just reproduce it with BMW 3 but I guess you can easily make it for the other as well.

DEMO with 2 tables (will change at 680px width):

 .computer{ display: table; } .mobile{ display:none; } @media only screen and (max-width:680px){ .computer{ display: none; } .mobile{ display:table; } }

 <table class="table computer"> <thead> <tr> <th class="empty"></th> <th>0-50</th> <th>0-75</th> <th>0-100</th> </tr> </thead> <tbody> <tr> <th>BMW M3</th> <td>4.2</td> <td>4.9</td> <td>5.7</td> </tr> <tr> <th>BMW M4</th> <td>4.1</td> <td>4.6</td> <td>5.4</td> </tr> <tr> <th>Mercedes AMG E63</th> <td>4.4</td> <td>4.9</td> <td>5.9</td> </tr> </tbody> </table> <table class="table mobile"> <thead> <tr> <th colspan="2">BMW M3</th> </tr> </thead> <tbody> <tr> <th>0-50</th> <td>4.2</td> </tr> <tr> <th>0-75</th> <td>4.9</td> </tr> <tr> <th>0-100</th> <td>5.7</td> </tr> </tbody> </table>

In Demo 2, I added directly lines correctly organised, directly into your original table. As you did not mention if you can or not make that. If you cannot do that then yeah, it should be js and quite a job, as I commented below your question.

DEMO 2 with 1 table

 .computer{ display: table; } .mobile{ display:none; } @media only screen and (max-width:680px){ .computer{ display: none; } .mobile{ display:table; } }

 <table class="table"> <thead class="computer"> <tr> <th class="empty"></th> <th>0-50</th> <th>0-75</th> <th>0-100</th> </tr> </thead> <tbody> <tr class="computer"> <th>BMW M3</th> <td>4.2</td> <td>4.9</td> <td>5.7</td> </tr> <tr class="computer"> <th>BMW M4</th> <td>4.1</td> <td>4.6</td> <td>5.4</td> </tr> <tr class="computer"> <th>Mercedes AMG E63</th> <td>4.4</td> <td>4.9</td> <td>5.9</td> </tr> <!------- [START] Mobile -----------> <tr class="mobile"> <th colspan="2">BMW M3</th> </tr> <tr class="mobile"> <th>0-50</th> <td>4.2</td> </tr> <tr class="mobile"> <th>0-75</th> <td>4.9</td> </tr> <tr class="mobile"> <th>0-100</th> <td>5.7</td> </tr> <!------- [END] Mobile -----------> </tbody> </table>

DEMO 3 is your original table that we custom with JS. To get final result as demo 2:

DEMO 3 Inspire from demo 2 with js dynamic:

 var tbodyTr = $('tbody > tr'); tbodyTr.each(function(){ var theadMobile = $(this).find('th'); $('tbody > tr:last').after('<tr class="mobile"></tr>'); $('tbody > tr:last').append('<th></th>'); $('tbody > tr:last > th').append(theadMobile.html()); var i = 1; $(this).find('td').each(function(){ var thHeaders = $('thead > tr > th').eq(i).html(); $('tbody > tr:last').after('<tr class="mobile"></tr>'); $('tbody > tr:last').append('<th></th>'); $('tbody > tr:last > th').append(thHeaders); $('tbody > tr:last').append($(this).html()); i++; }); }); $('thead').addClass('computer'); $('tbody > tr').each(function(){ if (!$(this).hasClass("mobile")) $(this).addClass('computer'); });

 .computer{ display: table; } .mobile{ display:none; } @media only screen and (max-width:680px){ .computer{ display: none; } .mobile{ display:table; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table"> <thead> <tr> <th class="empty"></th> <th>0-50</th> <th>0-75</th> <th>0-100</th> </tr> </thead> <tbody> <tr> <th>BMW M3</th> <td>4.2</td> <td>4.9</td> <td>5.7</td> </tr> <tr> <th>BMW M4</th> <td>4.1</td> <td>4.6</td> <td>5.4</td> </tr> <tr> <th>Mercedes AMG E63</th> <td>4.4</td> <td>4.9</td> <td>5.9</td> </tr> </tbody> </table>