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

我找到了一个可以为你执行此操作的函数，你必须将表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 2

您可以使用以下代码，希望它能为您提供帮助。

<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 3

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

如果您有机会根据移动设备/桌面添加课程，请使用该课程
如果不这样做，请检查窗口宽度和宽度。运行此功能前的高度。

代码：

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

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

4 个答案: