Here I have created sample that full-fill your requirement.
HTML
<div>
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=tblEmployees]').footable();
});
</script>
<asp:Repeater ID="rptEmployees" runat="server">
<HeaderTemplate>
<table id="tblEmployees" class="footable" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th data-class="expand" scope="col">
Customer Id
</th>
<th scope="col">
Customer Name
</th>
<th style="display: table-cell;" data-hide="phone" scope="col">
Country
</th>
<th style="display: table-cell;" data-hide="phone" scope="col">
Salary
</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<td>
<%#Eval("Id")%>
</td>
<td>
<%#Eval("Name")%>
</td>
<td style="display: table-cell;">
<%#Eval("Country")%>
</td>
<td style="display: table-cell;">
<%#Eval("Salary")%>
</td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
Namespace
using System.Data;
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("Salary") });
dt.Rows.Add(1, "John Hammond", "United States", 70000);
dt.Rows.Add(2, "Mudassar Khan", "India", 40000);
dt.Rows.Add(3, "Suzanne Mathews", "France", 30000);
dt.Rows.Add(4, "Robert Schidner", "Russia", 50000);
rptEmployees.DataSource = dt;
rptEmployees.DataBind();
}
}
Screenshot