我已经编写了自定义css来实现此功能。要使用我的代码，请按照以下步骤操作：

Step1 ：将GridView封闭在ID为no-more-gridView的部分内
如下

 < section id =no-more-gridView> 
< asp：GridView ..> 
。 
< / asp：GridView> 
< / section> 
 

Step2 ：为每个单元格指定一个数据标题属性后面的代码（在RowDataBound函数中），如下所示，

  e.Row.Cells [0] .Attributes [data-title ] =Col1Name; 
 e.Row.Cells [1] .Attributes [data-title] =Col2Name; 
 e.Row.Cells [2] .Attributes [data-title] =Col3Name; 
。 
。 
 

Step3 ：最后包含下面给出的自定义样式。使用媒体查询将样式应用于您希望它实现的任何屏幕大小，并且应该几乎可以做到这一点。

  / *作者：Vinay 
描述：响应式GridView 
 * / 

 / *强制gridview不像gridview * / 
＃no-more-gridView表，
＃no-more-gridView thead，
＃no-more-gridView tbody，
＃no-more-gridView th ，
＃no-more-gridView td，
＃no-more-gridView tr {
 display：block; 
} 
 / *隐藏表头（但不显示：无，用于辅助功能）* / 
＃no-more-gridView .table_column_head> * {
 display：none; 

＃no-more-gridView tr {all：revert; border：2px solid #ccc; height：auto！important;} 
＃no-more-gridView td {
 / *表现为行* / 
 border：none; 
 border-bottom：1px solid #eee; 
职位：亲属; 
 padding-left：50％; 
空格：正常; 
 text-align：left; 
 padding-bottom：1em; 
} 
＃no-more-gridView td：before {
 / *现在像表格标题* / 
 position：absolute; 
 / *顶部/左侧值模拟填充* / 
 left：6px; 
宽度：45％; 
 padding-right：10px; 
 white-space：nowrap; 
 text-align：left; 
 font-weight：bold; 


标记数据
 * / 
＃no-more-gridView td：before {content：attr（data-title）; } 
 

I want the asp gridview to show responsive behaviour like the html table does with the no-more-table css style as seen here http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table.

Is there a way to achieve it.

I have tried one way before, which is to replace my gridview with the html table and apply no-more-table style from code behind. But I don't want to do this as I want to all the features offered by the asp:GridView.

I have written custom css to achieve this feature. To use my code follow the below steps,

Step1: Enclose your GridView inside a section with Id as no-more-gridView as below

<section id="no-more-gridView">
    <asp:GridView..>
    .
    </asp:GridView>
</section>

Step2: Assign a data-title attribute to each of your cells from code behind (inside the RowDataBound function) like below,

e.Row.Cells[0].Attributes["data-title"] = "Col1Name";
e.Row.Cells[1].Attributes["data-title"] = "Col2Name";
e.Row.Cells[2].Attributes["data-title"] = "Col3Name";
.
.

Step3: Finally include my custom style given below. Use media query to apply the style at whatever screen size you wish it to come to effect and that should pretty much do the trick.

/*  Author     : Vinay
    Description: Responsive GridView
*/

    /* Force gridview to not be like gridview anymore */
    #no-more-gridView table, 
    #no-more-gridView thead, 
    #no-more-gridView tbody, 
    #no-more-gridView th, 
    #no-more-gridView td, 
    #no-more-gridView tr { 
        display: block; 
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-gridView .table_column_head > * { 
        display:none;
    }
    #no-more-gridView tr { all: revert;border: 2px solid #ccc;height:auto !important;}
    #no-more-gridView td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:left;
        padding-bottom: 1em;
    }
    #no-more-gridView td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }
    /*
    Label the data
    */
    #no-more-gridView td:before { content: attr(data-title); }