使jQuery数据表响应不同的窗口大小

我认为这更像是一个基本的CSS问题。我尝试了很多东西，但我很好奇如何使

GridView\u OrderNew\u包装器

响应。代码

HTML

<div id="main" class="main">

        <div class="row mainRows">

            <div id="mainRowTopLeft" class="col-6 quads">

                <div id="topLeftTableContainer" class="tableContainer">

                    <asp:GridView ID="GridView_OrderNew" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDS_OrderNew" CssClass="hover nowrap compact">
                        <Columns>
                            <asp:BoundField DataField="StrItemDesc" HeaderText="StrItemDesc" SortExpression="StrItemDesc" />
                            <asp:BoundField DataField="StrSisfinPO" HeaderText="StrSisfinPO" SortExpression="StrSisfinPO" />
                            <asp:BoundField DataField="StrBudgetCode" HeaderText="StrBudgetCode" SortExpression="StrBudgetCode" />
                            <asp:BoundField DataField="IntQuantity" HeaderText="IntQuantity" SortExpression="IntQuantity" />
                        </Columns>
                    </asp:GridView>

                    <div id="footer">                            

                    </div>

                    <asp:TextBox ID="Order_Selection" runat="server" AutoCompleteType="Disabled" AutoPostBack="true" CssClass="hide"></asp:TextBox>

                </div>

            </div>

   <div>

正如您可能知道的，我正在尝试使

\GridView\u OrderNew\u wrapper

响应

tableContainer

。在哪里/如何允许表格响应不同的窗口大小

---

提前感谢您的建议

第一个问题是使用webforms。。。您应该改用MVC，但这是另一个主题。：）

这就是我用的。。。这将使原始数据表正常，当屏幕宽度足够小时，将应用flex box css Rules并很好地折叠所有内容。。。这不仅适用于数据表，也适用于任何表

@media screen and (max-width: 767px) {

    tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0.5em 0;
        border: 1px solid rgba(3,3,3,0.2);
    }

    td, th {
        flex: 1 1 150px;
        border: 0.5px solid rgba(3,3,3,0.2);
    }  
}

---

html中的

GridView\u OrderNew\u wrapper

在哪里？@MarcelWasilewski

GridView\u OrderNew\u wrapper

由jQuery dataTables创建。它不在我编码的HTML中，但在浏览器中呈现为HTML。

@media screen and (max-width: 767px) {

    tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0.5em 0;
        border: 1px solid rgba(3,3,3,0.2);
    }

    td, th {
        flex: 1 1 150px;
        border: 0.5px solid rgba(3,3,3,0.2);
    }  
}