how do I create a responsive table using asp.net?

Question

I wanted to create a responsive table. In my code I am unable to call the CSS, please help me. I have attached the screenshot below.

I have a grid-view control which I need to make it responsive. I use tg-education-detail tg-haslayout jquery and CSS to the following code

Responsive

<div class="tg-education-detail tg-haslayout">
                         <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" class="table-striped educations_wrap table"  >
                <Columns>
                     <asp:TemplateField HeaderText="Department"  ItemStyle-CssClass="DepartmentID" >
                        <ItemTemplate>
                            <asp:Label Text='<%# Eval("DepartmentID") %>' runat="server" />
                            <asp:TextBox Text='<%# Eval("DepartmentID") %>' runat="server" Style="display: none" />
                        </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField HeaderText="Designation"  ItemStyle-CssClass="DesignationID">
                        <ItemTemplate>
                            <asp:Label Text='<%# Eval("DesignationID") %>' runat="server" />
                            <asp:TextBox Text='<%# Eval("DesignationID") %>' runat="server" Style="display: none" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="ContactPersonName"  ItemStyle-CssClass="ContactPersonName">
                        <ItemTemplate>
                            <asp:Label Text='<%# Eval("ContactPersonName") %>' runat="server" />
                            <asp:TextBox Text='<%# Eval("ContactPersonName") %>' runat="server" Style="display: none" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="ContactPersonAddress"  ItemStyle-CssClass="ContactPersonAddress">
                        <ItemTemplate>
                            <asp:Label Text='<%# Eval("ContactPersonAddress") %>' runat="server" />
                            <asp:TextBox Text='<%# Eval("ContactPersonAddress") %>' runat="server" Style="display: none" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Mobile" ItemStyle-CssClass="Mobile">
                        <ItemTemplate>
                            <asp:Label  Text='<%# Eval("Mobile") %>' runat="server" />
                            <asp:TextBox  Text='<%# Eval("Mobile") %>' runat="server" Style="display: none" />
                        </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField HeaderText="Phone" ItemStyle-CssClass="Phone">
                        <ItemTemplate>
                            <asp:Label Text='<%# Eval("Phone") %>' runat="server" />
                            <asp:TextBox Text='<%# Eval("Phone") %>' runat="server" Style="display: none" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="AadhaarCardNo" ItemStyle-CssClass="AadhaarCardNo">
                        <ItemTemplate>
                            <asp:Label Text='<%# Eval("AadhaarCardNo") %>' runat="server" />
                            <asp:TextBox Text='<%# Eval("AadhaarCardNo") %>' runat="server" Style="display: none" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton Text="Edit" runat="server" CssClass="Edit" />
                            <asp:LinkButton Text="Update" runat="server" CssClass="Update" Style="display: none" />
                            <asp:LinkButton Text="Cancel" runat="server" CssClass="Cancel" Style="display: none" />
                            <asp:LinkButton Text="Delete" runat="server" CssClass="Delete" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

Answer 1

This Link Can help you:

Responsive GridView in ASP.Net

A GridView control provides a Responsive Design and is easy with a fast and responsive development Bootstrap framework.

So, let's proceed with the following procedure.

Package Manager Console 

PM > Install-Package Twitter.Bootstrap.Bootswatch.Cosmo

Grid view Control and Data Binding 

HeaderStyle-CssClass=" " ItemStyle-CssClass=" "

Bootstrap Responsive Classes

Table table-striped table-bordered table-hover

Create a new project using "File" -> "New" -> "Project..." then select Web then select "ASP.Net Web Forms Application". Name it “GridviewResponsive".

For the new ASP.NET Project select Empty template then select the Web Forms checkbox then click OK.

In the Design Source write the code as in the following.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridviewResponsive.Default" %>  

<!DOCTYPE html>  

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Responsive GridView in ASP.NET</title>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <link href="Content/bootstrap.cosmo.min.css" rel="stylesheet" />  
    <link href="Content/StyleSheet.css" rel="stylesheet" />  

</head>  
<body>  
    <form id="form1" runat="server">  
        <br />  
        <div id="mainContainer" class="container">  
            <div class="shadowBox">  
                <div class="page-container">  
                    <div class="container">  
                        <div class="jumbotron">  
                            <p class="text-danger">Responsive GridView in ASP.NET </p>  
                            <span class="text-info">Desktop Tablet Phone Different layout </span>  
                        </div>  
                        <div class="row">  
                            <div class="col-lg-12 ">  
                                <div class="table-responsive">  
                                    <asp:GridView ID="grdCustomer" runat="server" Width="100%" CssClass="table table-striped table-bordered table-hover" AutoGenerateColumns="False" DataKeyNames="CustomerID" EmptyDataText="There are no data records to display.">  
                                        <Columns>  
                                            <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />  
                                            <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />  
                                            <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" ItemStyle-CssClass="visible-xs" HeaderStyle-CssClass="visible-xs" />  
                                            <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />  
                                            <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" />  
                                            <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" />  
                                            <asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />  
                                            <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />  
                                            <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />  
                                            <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />  
                                        </Columns>  
                                    </asp:GridView>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </form>  
</body>  
</html>