根据其列将 HTML table 拆分为多个 table

Question

我需要创建响应式 HTML/CSS table。在移动屏幕上，此 table 应根据其列分成 2 table。这是我原来的 table:

                <table class="table" style="position: relative; left: 0%; display: inline-block;">
                    <thead style="color:#ceb03d">
                        <tr>
                            <th id="mainItem"></th>
                            <th id="column_1">column1</th>
                            <th id="column_2">column2</th>
                            <th id="column_3">column3</th>
                            <th id="column_4">column4</th>
                            <th id="column_5">column5</th>
                            <th id="column_6">column6</th>
                            <th id="column_7">column7</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in model.items"> //The table contains several rows.
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

在移动设备上，我想按这些列显示第一个 table：
"mainItem", "column_1", "column_2", "column_3", "column_4"
第二个 table（在第一个 table 下方）应包含这些列：
"mainItem", "column_1", "column_5", "column_6", "column_7"

如何使用 css 媒体实现此目的？
我的问题和this几乎一样，但是没有收到任何suitable的回答。（评论区提到的URL已经不存在了）
注意：不是我要找的，因为它根据行拆分了 table。

Answer 1

.desktop-container {
  display: block;
}
.mobile-container {
  display: none;
}
@media (max-width: 768px) {
  .desktop-container {
     display: none;
   }
  .mobile-container {
     display: block;
   }
}

<div class="desktop-container">
  place desktop table here
</div>
<div class="mobile-container">
  place mobile table here
</div>

以上只是一个简单的例子。它们不必是 <div> 容器，如果需要，您可以在 <tr> 元素上执行此操作，但如果需要，您需要使用 display: table-row 而不是 display: block您将类放在 <tr> 上。当它可见时，使用您想赋予该元素 display 的任何值。

@media查询使用起来真的很简单：

any-selector {
  any-css-rule
}
@media(any-condition) {
  any-selector {
    /* same selector as above */
    any-css-rule 
    /* same rule as above, different value */
  }
}

当 any-condition 为真时，@media 中的内容适用。当它不正确时，上面的内容适用。就这些了。

根据其列将 HTML table 拆分为多个 table

Split HTML table into multiple tables based on its columns

html

css

responsive-design