如何使用asp.net创建响应表？

我想创建一个响应表。在我的代码中，我无法调用CSS，请帮助我。我附上了下面的截图。如何使用asp.net创建响应表？

我有一个网格视图控件，我需要使其响应。我用tg-education-detail tg-haslayout jQuery和CSS下面的代码

<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>

来源

2017-08-12 Vanuston Intelligence

-2

您可以使用引导类table-responsive让所有类型的表&电网响应

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
</head> 
 
<body> 
 

 
<div class="container"> 
 
                       
 
    <div class="table-responsive">   
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>#</th> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Age</th> 
 
     <th>City</th> 
 
     <th>Country</th> 
 
     <th>Country</th> 
 
     <th>Country</th> 
 
     <th>Country</th> 
 
     <th>Country</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>Anna</td> 
 
     <td>Pitt</td> 
 
     <td>35</td> 
 
     <td>New York</td> 
 
     <td>USA</td> 
 
     <td>USA</td> 
 
     <td>USA</td> 
 
     <td>USA</td> 
 
     <td>USA</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-08-12 10:54:23

没有我需要的GridView代码级的CSS代码 –

您也可以使用'表responsive'使gridview的responsvie这样'

' –

检查此链接 http://www.c-sharpcorner.com/UploadFile/47548d/response-grid-view-in-Asp-Net/ 它的工作 –

这链接可以帮助你：

响应GridView控件在ASP.Net

GridView控件提供了响应式设计，易于使用和响应速度发展引导框架。

因此，我们继续下面的过程。

Package Manager Console

PM>安装-封装Twitter.Bootstrap.Bootswatch.Cosmo

Grid view Control and Data Binding

HeaderStyle-的CssClass = “ ”ItemStyle-的CssClass =“”

Bootstrap Responsive Classes

表表条纹表-bordered table-hover

使用“File” - >“New” - >“Project ...”创建一个新项目，然后选择Web选择“ASP.Net Web窗体应用程序”。将它命名为“GridviewResponsive”。

对于新的ASP.NET项目选择空的模板，然后选择Web窗体复选框，然后单击确定。

在设计源代码写在下面。

<%@ 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>

来源

2017-10-25 18:51:26

如何使用asp.net创建响应表？

回答

相关问题