Datatable layout gets messed up with scrollX

mischamorf

I have 4 tables on my site. Only 1 is displayed at a time. I have a wrapper around eaech of the tables that get hidden and shown over javascript. When I toggle between them it completly messes up the layout.
This is a table:
` <div style="display:none;" id="dayTableWrapper" class="col-12 tableWrapper ">
<table id="dayTable" class="table table-striped table-bordered reservationTable" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">
Kennzeichen
</th>
<th class="th-sm">
Name
</th>
<th class="th-sm">
Sichtausweis
</th>
<th class="th-sm">
Datum
</th>

                        <th class="th-sm">
                            Grund
                        </th>
                        <th class="th-sm">
                            Areal
                        </th>
                        <th class="th-sm">
                            Erfasser
                        </th>
                        <th class="th-sm">
                            Bemerkung
                        </th>
                        <th class="th-sm">
                            Aktion
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @{
                        foreach (var dayReservation in Model.ReservationsVM.DayParkingReservations)
                        {
                            <tr>
                                <td>@dayReservation.CarMark</td>
                                <td>@dayReservation.GivenName @dayReservation.SurName</td>
                                <td>@dayReservation.BadgeNumber</td>
                                <td>@dayReservation.StartDate.ToShortDateString()</td>
                                <td>Grund</td>
                                <td>@dayReservation.Area.AreaName</td>
                                <td>@dayReservation.CreatedByNavigation.UserName</td>
                                <td>@dayReservation.CreatedByNavigation.UserName</td>
                                <td>
                                    <a id="PdfExport" class="m-1  "> <i class=" rgba-red-slight z-depth-1 red-text p-2 rounded fa-1x fas fa-file-pdf "></i></a>
                                    <a id="PdfExport" class="m-1   "> <i class=" rgba-red-slight z-depth-1 red-text p-2 rounded fa-1x fas fa-file-pdf "></i></a>
                                </td>
                            </tr>
                        }
                    }

                </tbody>
            </table>

        </div>

`

What can I do about this issue?

kthorngren

Could be that you need to use columns.adjust(), as shown in this example when you display the table. Are you using other extensions, like FixedHeader, that aren't supported with scrollX?

If this doesn't help please post a link to your page or a test case replicating the problem so we can help diagnose.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin