根据HTML表的列将其拆分为多个表

我需要创建一个响应HTML/CSS表。在移动屏幕上，此表应根据其列分为两个表。这是我的原始表格：

在mobile上，我想通过以下列显示第一个表： 主项，第1列，第2列，第3列，第4列 第一个表下方的第二个表应包含以下列： 主项，第1列，第5列，第6列，第7列

如何使用css媒体来实现这一点？ 我的问题与我的差不多，但没有得到任何适当的回答。注释部分中提到的URL已不存在。 注意：这不是我要找的，因为它会按行分割表。

.桌面容器{ 显示：块； } .流动货柜{ 显示：无； } @介质最大宽度：768px{ .桌面容器{ 显示：无； } .流动货柜{ 显示：块； } } 把桌面桌子放在这里 把活动桌放在这里

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