I have one static page that has one table design and I just want to apply all css classes from them to my grid view.
Here is static table html :
<table class="table display data-table text-nowrap">
<thead>
<tr>
<th>
<div class="form-check">
<input type="checkbox" class="form-check-input checkAll">
<label class="form-check-label">Roll</label>
</div>
</th>
<th>Photo</th>
<th>Name</th>
<th>Gender</th>
<th>Class</th>
<th>Section</th>
<th>Parents</th>
<th>Address</th>
<th>Date Of Birth</th>
<th>Phone</th>
<th>E-mail</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">#0021</label>
</div>
</td>
<td class="text-center"><img src="img/figure/student2.png" alt="student"></td>
<td>Mark Willy</td>
<td>Male</td>
<td>2</td>
<td>A</td>
<td>Jack Sparrow </td>
<td>TA-107 Newyork</td>
<td>02/05/2001</td>
<td>+ 123 9988568</td>
<td>kazifahim93@gmail.com</td>
<td>
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<span class="flaticon-more-button-of-three-dots"></span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i
class="fas fa-times text-orange-red"></i>Close</a>
<a class="dropdown-item" href="#"><i
class="fas fa-cogs text-dark-pastel-green"></i>Edit</a>
<a class="dropdown-item" href="#"><i
class="fas fa-redo-alt text-orange-peel"></i>Refresh</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">#0022</label>
</div>
</td>
<td class="text-center"><img src="img/figure/student3.png" alt="student"></td>
<td>Jessia Rose</td>
<td>Female</td>
<td>1</td>
<td>A</td>
<td>Maria Jamans</td>
<td>59 Australia, Sydney</td>
<td>02/05/2001</td>
<td>+ 123 9988568</td>
<td>kazifahim93@gmail.com</td>
<td>
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<span class="flaticon-more-button-of-three-dots"></span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i
class="fas fa-times text-orange-red"></i>Close</a>
<a class="dropdown-item" href="#"><i
class="fas fa-cogs text-dark-pastel-green"></i>Edit</a>
<a class="dropdown-item" href="#"><i
class="fas fa-redo-alt text-orange-peel"></i>Refresh</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
and this is my grid view code :
<asp:GridView ID="egrd" runat="server" AutoGenerateColumns="False" CssClass="table display data-table text-nowrap dataTable no-footer"
Width="100%" PageSize="9999999" OnPreRender="egrd_PreRender" GridLines="None" OnRowCreated="egrd_RowCreated" DataKeyNames="ID" OnRowCommand="egrd_RowCommand">
<EmptyDataTemplate>
<asp:Label ID="lblEmptySearch" runat="server" Font-Bold="true" ForeColor="Orange">No Data Found To Display . . .</asp:Label>
</EmptyDataTemplate>
<Columns>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%">
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" CssClass="form-check-input checkAll"/><label class="form-check-label">Roll No</label>
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" class="form-check-input">
<asp:LinkButton runat="server" CausesValidation="false" ID="lnkroll" CommandName="detail"
CommandArgument='<%#Bind("ID") %>' ToolTip="View Detail" Text='<%#Bind("RollNo")%>' Font-Underline="true">
</asp:LinkButton>
</ItemTemplate>
<HeaderStyle CssClass="sorting_asc"/>
<ItemStyle HorizontalAlign="Center" Width="10%"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="Photo">
<ItemTemplate>
<asp:Image ID="Image1" runat="server"/>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="10%"></ItemStyle>
</asp:TemplateField>
<asp:BoundField HeaderText="Name" DataField="Name"/>
<asp:BoundField HeaderText="Gender" DataField="Gender"/>
<asp:BoundField HeaderText="Class" DataField="Class"/>
<asp:BoundField HeaderText="Section" DataField="Section"/>
<asp:BoundField HeaderText="Parents" DataField="Parents" />
<asp:BoundField HeaderText="Address" DataField="Address"/>
<asp:BoundField HeaderText="Date Of Birth" DataField="DOB"/>
<asp:BoundField HeaderText="Mobile" DataField="MobileNo"/>
<asp:BoundField HeaderText="Email" DataField="EmailID"/>
<asp:TemplateField>
<ItemTemplate>
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<span class="flaticon-more-button-of-three-dots"></span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i
class="fas fa-times text-orange-red"></i>Close</a>
<asp:LinkButton ID="lbut_edit" runat="server" CssClass="dropdown-item" CommandName="edits" CommandArgument='<%#Eval("ID")%>'><i
class="fas fa-cogs text-dark-pastel-green"></i>Edit</asp:LinkButton>
<a class="dropdown-item" href="#"><i
class="fas fa-redo-alt text-orange-peel"></i>Refresh</a>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I just want my grid view look like: How can I make my grid view renders as image below?
