I have been using Datatables.net v1.13.11 with custom BS5 templates provided by Themesbrand (https://themesbrand.com/velzon/html/default/tables-datatables.html). After I have upgraded to v2.0, I have noticed the following:
- A border box was shown when mouse cursor was over a column header.
- Extra top and bottom border lines were shown.
Sample
I have included the following in my codes:
<link href="https://cdn.datatables.net/v/bs5/dt-2.0.5/r-3.0.2/rg-1.5.0/datatables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.5/r-3.0.2/rg-1.5.0/datatables.min.js"></script>
I have tried to change the custom CSS file but failed. I am not able to identify the classes to be changed.
Any advice on how to rectify the issues?
I have tried to change the custom CSS file but failed. I am not able
to identify the classes to be changed.Any advice on how to rectify the issues?
Well, based on your scenario and description, it seems datatables.net v2.0 introduced changes to its internal styling. These changes might conflict with your existing custom CSS classes that were designed for v1.13.11 and BS5. This can lead to unexpected visual artifacts like border boxes and extra lines.
Although, its hard to offer any straight forward solution for that, but we could investigate couple of steps.
First of all, we could check browser’s developer tools to inspect the table elements. Look for the specific table cells, rows, or headers that are displaying the unwanted borders.
Once we identified the elements, check the applied CSS classes. These classes might be introduced by Datatables.net v2.0 or be a combination of your custom CSS and Datatables classes.
Furthermore, try temporarily disabling your custom CSS file to see if the issue persists. If the borders disappear, then the conflict is within your custom styles.
Most importantly, we can target the specific Datatables classes with more specific CSS rules in your custom stylesheet. This approach gives you more control over the final look and feel.
However, it requires a good understanding of CSS specificity and can become cumbersome to maintain if there are many conflicts.
In addition, If the conflicts are minor, you might be able to update your custom CSS to work with the new Datatables classes. This might involve adjusting selectors or class names to avoid conflicts.
Following above steps, you could investigate the issue steps by step.