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

Question

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

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>

CSS

.main {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color:#2e9ef2;
}

.mainRows {
    position: relative;    
    height: 45vh;
    width: 100vw;
    background-color:azure;
    border: solid 1px red;
}

.quads {
    position: relative;
    display: flex;
    align-items:center;
    justify-content:center;
    height: 100%;
    border: solid 1px black;
}

.tableContainer {    
    position: relative;
    margin: 1%;
    height: 95%;
    width: 100%;
    border: 1px solid orangered;
    overflow-y: auto;
}

#GridView_OrderNew_wrapper {
    position: relative;
}

#footer {
    position: fixed;
    bottom: 1px;
    height: 30px;
    width: 100%;
    background-color:aqua;
}

如您所知，我正在尝试使 #GridView_OrderNew_wrapper 响应 tableContainer。我在哪里/如何允许表格响应不同的窗口大小？

提前感谢您的任何建议!

Answer 1

第一个问题是使用 webforms...您应该改用 MVC，但那是另一个话题。 :)

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

@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);
    }  
}