why cell header different from cell details for same column on data ta

Question

I work on asp.net mvc i notice that cell header width different from width of cell content details

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 as examples

I using datat table as below 

my code details as below 

<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>

Markup

Copy

 

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();

        }
    });

JavaScript

Copy

my issue display on image below