让 jQuery dataTables 响应不同的窗口大小答案

【问题标题】：Make jQuery dataTables responsive to different window sizes让 jQuery dataTables 响应不同的窗口大小
【发布时间】：2018-07-17 14:27:43
【问题描述】：

我认为这更像是一个基本的 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。我在哪里/如何让表格响应不同的窗口大小？

提前感谢您的任何建议！

【问题讨论】：

你的html中GridView_OrderNew_wrapper在哪里？
@MarcelWasilewski GridView_OrderNew_wrapper 由 jQuery 数据表创建。它不在我编码的 HTML 中，而是在浏览器中呈现的 HTML。

标签： jquery css datatables

【解决方案1】：

第一个问题是使用网络表单...您应该改用 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);
    }  
}

【讨论】：