I work on asp.net MVC I face issue cell header width different from width of cell content details for same column for DataTable.
So how to make cell header width and cell details content to be same.
I make red marks to columns not have same width header and details as request date and Dept.Manager columns and others etc.
I using data table as below my code details as below
https://www.mediafire.com/view/dmll46fdoe3xnyw/IssuesCelldetails.png
<div class="row" style="padding-top: 10px; margin-top: 10px; border: 1px solid black; margin-bottom: 50px; width: 100%; padding-left: 2em; padding-right: 2em;padding-bottom: 2em;">
<h2 style="margin-left: 5px; margin-top: 40px;">My Requests</h2>
<table id="dtbl" class="table table-bordered table-hover table-striped" style="width:100%;">
<thead>
<tr style="background-color: #f2f2f2;">
<th style="border: 1px solid black;">Request No</th>
<th style="border: 1px solid black;">Request Date</th>
<th style="border: 1px solid black;">Reason</th>
<th style="border: 1px solid black;">Line Manager</th>
<th style="border: 1px solid black;">Dept.Manager</th>
<th style="border: 1px solid black;">Employee Remarks</th>
<th style="border: 1px solid black;">View Resignation Form</th>
<th style="border: 1px solid black;">Print(Resignation)</th>
<th style="border: 1px solid black; display: none">Exit Interview</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.MyRequests)
{
<tr style="background-color: #f2f2f2;">
<td style="border: 1px solid black;">
@Html.DisplayFor(modelItem => item.RequestNo)
</td>
<td style="border: 1px solid black;">
@Convert.ToDateTime(item.ResignationSubmissionDate).ToString("dd/MM/yyyy")
</td>
<td style="border: 1px solid black;">
@Html.DisplayFor(modelItem => item.Reason)
</td>
<td style="border: 1px solid black;">
@if (item.LineManagerStatus == "Waiting for Line Manager Approval")
{
<span>Pending</span>
}
else if (item.LineManagerStatus == "Rejected by Line Manager")
{
<span>Rejected</span>
}
else
{
@Html.DisplayFor(modelItem => item.LineManagerStatus)
}
</td>
<td style="border: 1px solid black;">
@if (item.DirectManagerStatus == "Waiting for Department Head Approval")
{
<span>Pending</span>
}
else if (item.DirectManagerStatus == "Rejected by Head Department")
{
<span>Rejected</span>
}
else
{
@Html.DisplayFor(modelItem => item.DirectManagerStatus)
}
</td>
<td style="border: 1px solid black;">
@if (item.RevokeRequest == "1")
{
<span>Cancelled</span>
}
else
{
}
</td>
<td style="border: 1px solid black;"></td>
<td style="border: 1px solid black;"></td>
<td style="border: 1px solid black; display: none">
<a class="exitinterview">Exit Interview</a>
</td>
</tr>
}
</tbody>
</table>
</div>
// and on jQuery i do as below
$(document).ready(function () {
$('#dtbl').DataTable({
"scrollX": true,
"pageLength": 10,
"dom": 't', // Only show the table without search and other elements
"language": {
"search": "", // Empty string to remove the search text
"searchPlaceholder": "" // Empty string to remove the search input
},
initComplete: function () {
$('.buttons-excel, .buttons-pdf, .buttons-print, .buttons-csv, .buttons-copy').remove();
}
});
});