如何将响应行为添加到asp：GridView

Question

我希望asp gridview显示响应行为，如html表所做的无更多表css样式 在此处看到http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table。

有没有办法实现它。

我已经尝试过一种方法，它是用html表替换我的gridview，并将 代码的no-more-table样式应用于后面。但我不想这样做，因为我想要提供的所有功能asp:GridView.

Answer 1

我写了自定义CSS来实现此功能。要使用我的代码遵循以下步骤，

第一步：附上与ID作为无更GridView的 如下

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

第二步一节里你的GridView：指定一个数据标题归因于每个细胞从后面的代码（该函数的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"; 
. 
. 

第三步：最后包括我在下面给出的自定义样式。使用media query可以在任何希望实现的屏幕大小上应用样式，并且应该可以做到这一点。

/* 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); }