Javascript asp.net中用于转换行和列的语法

这是原始的gridview。标题位于最上面的一行，每个项目的数据位于以下行中：

ProId ProdName Price Stock 1 P1 1000 10 2 P2 2000 20 3 P3 5000 25 ProId ProdName价格股票 1 P1 1000 10 2 P2 2000 20 3 P3 5000 25 我想转换我的网格视图，这样我就可以将所有标题放在最左边的第一列，并且一个项目的所有细节都放在一列而不是一行中

ProId 1 2 3 ProdName P1 P2 P3 Price 1000 2000 5000 Stock 10 20 25 项目1 2 3 ProdName P1 P2 P3 价格1000 2000 5000 库存1025 代码如下：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound" CellPadding="4" DataKeyNames="JobPostingId" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None"
CssClass="table table-striped table-bordered" AllowPaging="True">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:BoundField DataField="JobPostingId" HeaderText="JobPostingId" InsertVisible="False" ReadOnly="True" SortExpression="JobPostingId" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
            <HeaderStyle CssClass="visible-lg"></HeaderStyle>

            <ItemStyle CssClass="visible-lg"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="JobId" HeaderText="JobId" SortExpression="JobId" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
            <HeaderStyle CssClass="visible-lg"></HeaderStyle>

            <ItemStyle CssClass="visible-lg"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="ApplicantName" HeaderText="ApplicantName" SortExpression="ApplicantName" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
            <HeaderStyle CssClass="visible-lg"></HeaderStyle>

            <ItemStyle CssClass="visible-lg"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="ApplicantContactNo" HeaderText="ApplicantContactNo" SortExpression="ApplicantContactNo" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
            <HeaderStyle CssClass="visible-lg"></HeaderStyle>

            <ItemStyle CssClass="visible-lg"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
            <HeaderStyle CssClass="visible-lg"></HeaderStyle>

            <ItemStyle CssClass="visible-lg"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="StateId" HeaderText="StateId" SortExpression="StateId" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
            <HeaderStyle CssClass="visible-lg"></HeaderStyle>

            <ItemStyle CssClass="visible-lg"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="CountryId" HeaderText="CountryId" SortExpression="CountryId" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
            <HeaderStyle CssClass="visible-lg"></HeaderStyle>

            <ItemStyle CssClass="visible-lg"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField DataField="CreationDate" HeaderText="CreationDate" SortExpression="CreationDate" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
            <HeaderStyle CssClass="visible-lg"></HeaderStyle>

            <ItemStyle CssClass="visible-lg"></ItemStyle>

        </asp:BoundField>
        <asp:ButtonField ButtonType="Button" Text="View More" CommandName="viewApplication" ControlStyle-CssClass="btn btn-info" />
    </Columns>
    <EditRowStyle BackColor="#2461BF" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="black" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="black" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#EFF3FB" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#F5F7FB" />
    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
    <SortedDescendingCellStyle BackColor="#E9EBEF" />
    <SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:HRJobPortalConnectionString4 %>" SelectCommand="SELECT * FROM [JobPortalJobPosting]"></asp:SqlDataSource>

---

为此，请尝试使用CSS。但是在……之前 使用

ListView

而不是

GridView

<代码>列表视图允许根据需要呈现HTML，而不仅仅是作为

表格

。所以

<asp:ListView ID="lvRows" runat="server" ItemPlaceholderID="itemPlaceholder" DataSourceID="sqlProds">
    <LayoutTemplate>
        <div class="my-tbl">
            <div class="my-row">
                <div>prod id</div>
                <div>name</div>
                <div>price</div>
            </div>
            <div id="itemPlaceholder" runat="server"></div>
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div class="my-row">
            <div><%#Eval("productid") %></div>
            <div><%#Eval("productname") %></div>
            <div><%#Eval("unitprice","{0:c}") %></div>
        </div>
    </ItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="sqlProds" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindCnn %>"
    SelectCommand="SELECT top 4 productid,productname,unitprice FROM dbo.products"></asp:SqlDataSource>

对于列布局：

    .my-tbl{display:flex;
            flex-wrap: wrap;
            flex-direction: row;}
    .my-row{display:flex;
            flex-direction:column;}
    .my-tbl>div>div{width:90px;
                    overflow:hidden;
                    white-space:nowrap;}

---

表是用哪种语言生成的？你能发布生成表的代码吗？代码是写在C#上的。我也添加了代码。不要认为你可以使用GridView来实现这一点。您需要一个详细视图。但自从razor问世后，我就不再使用asp.net了。我帮不了你。仅供参考，这不是一个与JavaScript相关的问题。

    .my-tbl{display:flex;
            flex-wrap: wrap;
            flex-direction: column;}
    .my-row{display:flex;
            flex-direction:row;}
    .my-tbl>div>div{width:90px;
                    overflow:hidden;
                    white-space:nowrap;}

    .my-tbl{display:flex;
            flex-wrap: wrap;
            flex-direction: row;}
    .my-row{display:flex;
            flex-direction:column;}
    .my-tbl>div>div{width:90px;
                    overflow:hidden;
                    white-space:nowrap;}