data table, collapse, colspan, rowspan
HTML
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th rowspan="2">
Sl.no
</th>
<th colspan="2">
Student
</th>
</tr>
<tr>
<th>
Adm.No
</th>
<th>
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
3
</td>
<td>
Shajeer
</td>
</tr>
<tr>
<td>
1
</td>
<td>
3
</td>
<td>
Shajeer
</td>
</tr>
<tr>
<td>
1
</td>
<td>
3
</td>
<td>
Shajeer
</td>
</tr>
<tr>
<td>
1
</td>
<td>
3
</td>
<td>
Shajeer
</td>
</tr>
<tr>
<td>
1
</td>
<td>
3
</td>
<td>
Shajeer
</td>
</tr>
<tr>
<td>
1
</td>
<td>
3
</td>
<td>
Shajeer
</td>
</tr>
<tr>
<td>
1
</td>
<td>
3
</td>
<td>
Shajeer
</td>
</tr>
<tr>
<td>
1
</td>
<td>
3
</td>
<td>
Shajeer
</td>
</tr>
<tr>
<td>
1
</td>
<td>
3
</td>
<td>
Shajeer
</td>
</tr>
<tr>
<td>
1
</td>
<td>
...
CSS
th, td {
border: 1px solid black;
}
table{
border-collapse:collapse;
}
thead{
background-color:#ccc;
}
JavaScript
$('#myTable').DataTable();