How to change order of table td for responsive?

Question

There is a table on my page and when I screen size my table is jamming and which is why I want to change order of my table I hope I explain what I mean

this is my table on wide screen

but on responsive it must be like this

and I don't know how to do that any idea any example ?

HTML

<table class="table">
    <tr>
        <th>İki Kişilik Odada Kişi Başı</th>
        <th>İlave Yatak</th>
        <th>Tek Kişilik Oda</th>
        <th>Çocuk</th>
    </tr>
    <tr>
        <td>
            <p>
                <span>1,046,13</span>
                <span>590.00 <i>TL</i></span>
            </p>
        </td>
        <td>
            <p>
                <span>1,046,13</span>
                <span>590.00 <i>TL</i></span>
            </p>
        </td>
        <td>
            <p>
                <span>1,046,13</span>
                <span>590.00 <i>TL</i></span>
            </p>
        </td>
        <td>
            <p>1.Çocuk 0-14 Yaş Ücretsiz</p>
            <p>2.Çocuk 0-6 Yaş Ücretsiz</p>
            <p>2.Çocuk 7-14 Yaş 99,96 TL*</p>
        </td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}
th,td{
      border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: none;
    padding: 8px;
}

see example on codepen

you can do this using jquery trick http://stackoverflow.com/questions/2730699/convert-td-columns-into-tr-rows — danish farhaj, Oct 26 '16 at 07:53
check out Adorjan Princz's solution in http://stackoverflow.com/questions/6515475/rotate-a-table-90-degrees — Woncker, Oct 26 '16 at 08:09

score 1 · Answer 1 · answered Oct 26 '16 at 07:55

I found a function which can do this for you you have to pass your table id or table class to this funciton.

function TransposeTable(tableId)
{        
    var tbl = $('#' + tableId);
    var tbody = tbl.find('tbody');
    var oldWidth = tbody.find('tr:first td').length;
    var oldHeight = tbody.find('tr').length;
    var newWidth = oldHeight;
    var newHeight = oldWidth;

    var jqOldCells = tbody.find('td');        

    var newTbody = $("<tbody></tbody>");
    for(var y=0; y<newHeight; y++)
    {
        var newRow = $("<tr></tr>");
        for(var x=0; x<newWidth; x++)
        {
            newRow.append(jqOldCells.eq((oldWidth*x)+y));
        }
        newTbody.append(newRow);
    }

    tbody.replaceWith(newTbody);        
}

score 1 · Answer 2 · answered Oct 26 '16 at 08:04

You can use below code hope it will help you.

<table class="table">
    <tr>
        <td>
            <table class="table-inner">
                <tr>
                    <th>İki Kişilik Odada Kişi Başı</th>
                </tr>
                <tr>
                    <td>
                        <p> <span>1,046,13</span> <span>590.00 <i>TL</i></span> </p>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table class="table-inner">
                <tr>
                    <th>İki Kişilik Odada Kişi Başı</th>
                </tr>
                <tr>
                    <td>
                        <p> <span>1,046,13</span> <span>590.00 <i>TL</i></span> </p>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table class="table-inner">
                <tr>
                    <th>İki Kişilik Odada Kişi Başı</th>
                </tr>
                <tr>
                    <td>
                        <p> <span>1,046,13</span> <span>590.00 <i>TL</i></span> </p>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table class="table-inner">
                <tr>
                    <th>İki Kişilik Odada Kişi Başı</th>
                </tr>
                <tr>
                    <td>
                        <p> <span>1,046,13</span> <span>590.00 <i>TL</i></span> </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}
th,td{
      border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: none;
    padding: 0;
}
.table-inner th , .table-inner td{
  border: 0;
  padding: 8px;
}
.table-inner th{
  border-bottom:  1px solid #ccc;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .table td , .table th{
    display: block;
  }
}

Taha Paksu · Accepted Answer · 2016-10-26T09:20:42.410

This is the version I wrote, but you need to do something before that:

If you have the chance to add a class based on mobile/desktop, use that class
If you don't, check the window width & height before running this function.

The code:

function rotateTable() {
  var newTable = [];
  var newTableStruct = "<tr>";

  $("table.table").find("th, td").each(function() {
    var trIndex = $(this).closest("table").find("tr").index($(this).closest("tr"));
    var tdIndex = $(this).closest("tr").find("td, th").index($(this))
    newTable[tdIndex] = newTable[tdIndex] || [];
    newTable[tdIndex][trIndex] = $(this).html();
  });

  for (i = 0; i < newTable.length; i++) {
    for (j = 0; j < newTable[0].length; j++) {
      newTableStruct += "<td>" + newTable[i][j] + "</td>";
    }
    newTableStruct += "</tr><tr>";
  }
  newTableStruct += "</tr>";
  $("table.table").empty().append(newTableStruct);
}

rotateTable();

table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top: none;
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <th>İki Kişilik Odada Kişi Başı</th>
    <th>İlave Yatak</th>
    <th>Tek Kişilik Oda</th>
    <th>Çocuk</th>
  </tr>
  <tr>
    <td>
      <p>
        <span>1,046,13</span>
        <span>590.00 <i>TL</i></span>
      </p>
    </td>
    <td>
      <p>
        <span>1,046,13</span>
        <span>590.00 <i>TL</i></span>
      </p>
    </td>
    <td>
      <p>
        <span>1,046,13</span>
        <span>590.00 <i>TL</i></span>
      </p>
    </td>
    <td>
      <p>1.Çocuk 0-14 Yaş Ücretsiz</p>
      <p>2.Çocuk 0-6 Yaş Ücretsiz</p>
      <p>2.Çocuk 7-14 Yaş 99,96 TL*</p>
    </td>
  </tr>
</table>

Edit:

If you want to use it based on width, you'll need to add this:

$(document).ready(function(){
   if(window.screen.width < 768)
   {
      rotateTable();
   }
});

thanks I want to use this on responsive for example 767px what I have to do make it ? thanks. — ani_css, Oct 26 '16 at 09:14

score 1 · Answer 4 · answered Oct 26 '16 at 08:35

Just try it you will achieve what you want.

@media only screen and (min-width: 320px) and (max-width: 767px) {
      .table tr{
        width:50%;
        float:left;
        display:block;
        box-sizing:border-box;
      }
      .table td , .table th{
        display: block;
      }
      .table tr:first-child{
        border-right:1px solid #e5e5e5;
      }
      .table tr th{    
        border-bottom:0
      }
    }

How to change order of table td for responsive?

4 Answers4