html-table - 我想对不同 trs 中的 td 元素进行排序。当移动尺寸变成

Question

<table id="layouttable">
    <tr>
        <td class='col1'>1</td>
        <td class='col2'>2</td>
        <td class='col3'>3</td>
    </tr>
    <tr>
        <td class='col4'>4</td>
        <td class='col5'>5</td>
        <td class='col6'>6</td>
    </tr>
</table>

当移动尺寸变成

1 4
2
5
3
6

我想按上面的顺序列出它们。

flex - 由于 tr，订单不可用。

有谁知道这样一个非常简单的解决方案？

标签： html-tableresponsive-design

Answer 1

一个快速且非常肮脏的解决方案：

@media only screen and (max-width: 600px) {
  .desktop-table
  {
    display: none;
  }
}

@media only screen and (min-width: 601px) {
  .mobile-table
  {
    display: none;
  }
}

    <table id="layouttable" class="desktop-table">
        <tr>
            <td class='col1'>1</td>
            <td class='col2'>2</td>
            <td class='col3'>3</td>
        </tr>
        <tr>
            <td class='col4'>4</td>
            <td class='col5'>5</td>
            <td class='col6'>6</td>
        </tr>
    </table>

    <table id="layouttable-mobile" class="mobile-table">
             <tr><td class='col1'>1</td></tr>
             <tr><td class='col4'>4</td></tr>
             <tr><td class='col2'>2</td></tr>

             <tr><td class='col5'>5</td></tr>
             <tr><td class='col3'>3</td></tr>
             <tr><td class='col6'>6</td></tr>
    </table>