after convert html table to data table width and resolution and height changed so how to make it as before ?

Question

I work on asp.net razor page i face issue when convert html table to data table jQuery  design of table width and cell height and size of table changed after convert it to data table using jQuery Desired result to be data table after converted and original html table be same on every thing width and size and height so what is issue i don't know  i convert table to data table for pagination and search and filter and sort etc. . what i try as below  1- html table before convert it to data table using jQuery

<div id="Grid" style="margin-top:20px;">
    <form id="FrmDisplayData" method="post" style="width:100%;">
        <table id="example" class="display" style="width:100%;
table-layout:fixed;overflow-x: auto;max-width: 100%;">
            <thead>
                <tr>


                    <th class="sorting" style="width:70px;">AssetItemNo</th>
                    <th class="sorting" style="width:50px;">ParentNo</th>
                    <th class="sorting" style="width:50px;">SerialNo</th>
                    <th class="sorting" style="width:105px;">AccountCalssName</th>
                    <th class="sorting" style="width:115px;">EquipmentClassName</th>
                    <th class="sorting" style="width:85px;">DescClassName</th>
                    <th class="sorting" style="width:95px;">DetailClassName</th>
                    <th class="sorting" style="width:100px;">SelectedMCUName</th>
                    <th class="sorting" style="width:70px;">AssetOwner</th>
                    <th class="sorting" style="width:40px;">EmpNo</th>
                    <th class="sorting" style="width:40px;">Module</th>
                    <th class="sorting" style="width:45px;">LPONO</th>
                    <th class="sorting" style="width:55px;">ItemCode</th>
                    <th class="sorting">TaggingModule</th>

                </tr>
            </thead>
            <tbody>
                @if (Model.DisplayAssetTaggingDetails.AssetWithTaggingListData != null)
                {
                    @foreach (var AssetData in Model.DisplayAssetTaggingDetails.AssetWithTaggingListData)
                    {
                        <tr>


                            <td>@AssetData.AssetItemNo</td>
                            <td>@AssetData.ParentNo</td>
                            <td>@AssetData.SerialNo</td>
                            <td>@AssetData.AccountCalssName</td>
                            <td>@AssetData.EquipmentClassName</td>
                            <td>@AssetData.DescClassName</td>
                            <td>@AssetData.DetailClassName</td>
                            <td>@AssetData.SelectedMCUName</td>
                            <td>@AssetData.AssetOwner</td>
                            <td>@AssetData.EmpNo</td>
                            <td>@AssetData.Module</td>
                            <td>@AssetData.LPONO</td>
                            <td>@AssetData.ItemCode</td>
                            <td>@AssetData.TaggingModule</td>



                        </tr>
                    }
                }
            </tbody>
        </table>
    </form>
</div>

2- convert html table above to data table with jQuery for pagination 

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.2/datatables.min.css" />
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables JavaScript -->
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.2/datatables.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.2/datatables.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.11.2/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

<script type="text/javascript">

    $(document).ready(function () {


        var table = $('#example').DataTable({
            "bFilter": false,

            "paging": true, // Enable pagination
            "pageLength": 5, // Default number of rows per page
            "lengthMenu": [5, 10, 15, 20, 25, -1], // Dropdown options for number of rows per page
            "order": [], // Disable initial sorting
            "scrollX": true, // Enable horizontal scrolling,
                    "columnDefs": [
                { "targets": 'th', "className": 'dt-wrap' } // Add a custom class to the header cells
            ]
        });

        // Handle dropdown selection change event
        $('#page-length').on('change', function () {
            var selectedValue = parseInt($(this).val()); // Get the selected value from the dropdown
            table.page.len(selectedValue).draw(); // Set the number of rows per page and redraw the DataTable
        });

        });





</script>

so what i do to fix this issue please  so why design change after convert html table to data table using jQuery

Answer 1

Your code is a mess. You load multiple jquery libraries, multiple version of datatables, none of which are current. You load multiple conflicting css files.