I am encountering an issue with a table in my application that causes the UI to break when the screen width is reduced to less than 600px. To address this, I would like to implement the following bootstrap classes to add a scroll to the application:
.table-scrollable .table-scrollable-borderless
However, I do not want the scrolls to appear on the desktop UI.
To handle this situation, I have decided to use a media query:
<style>
@media (max-width: 600px) {
}
</style>
Since these classes are inherited from bootstrap and not custom-designed by me, I am unsure how to call them within the media queries.
Furthermore, I cannot modify the class names as there may be jQuery functions that rely on these specific class names to generate the desired scroll effect.
I would appreciate any guidance on this matter.