如何更改表 td 的顺序以进行响应？

Question

我的页面上有一张桌子，当我的屏幕大小时，我的桌子卡住了，这就是为什么我想改变我的桌子的顺序我希望我能解释一下我的意思

这是我在宽屏上的桌子

但在响应时它必须是这样的

我不知道该怎么做任何想法任何例子？

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 1

这是我写的版本，但在此之前你需要做一些事情：

1. 如果您有机会添加基于移动/桌面的课程，请使用该课程
2. 如果不这样做，请在运行此函数之前检查窗口的宽度和高度。

代码：

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>

编辑：

如果你想根据宽度使用它，你需要添加这个：

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

Answer 2

我找到了一个可以为您执行此操作的函数，您必须将您的表 ID 或表类传递给该函数。

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);        
}

Answer 3

您可以使用以下代码，希望对您有所帮助。

<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;
  }
}

Answer 4

只要尝试一下，你就会达到你想要的。

@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
      }
    }