recruit_man recruit_man - 1 month ago 5
CSS Question

How to change order of table td for responsive?

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

my table on wide screen

but on responsive it must be like this

and I want like this on responsive to be

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

Answer

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

  1. If you have the chance to add a class based on mobile/desktop, use that class
  2. 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>