The URL shows an example of the product information table we use wpDataTables for. We keep the width of the table very narrow on purpose, so it can be displayed without scrolling on smartphones. (it´s only two columns anyway).
But we still do need to make the table scrollable, in case it doesn´t fit on a smartphone. That does happen frequently, because the table is translated into different languages, some of which require much longer description texts than others (as do some of our products). That´s also the reason why we cannot use fixed width on the table columns, what looks good with one product in one language looks bad with another product in a different language. So scrollable is better.
HOWEVER on some machines (notably: windows PC), the scrollbar appears even when not necessary, and is much wider than the table itself. That doesn´t look good, and we need to get rid of that behaviour without losing the ability to scroll when needed.
If you want to apply it only to one table, then it should go in between the <style>...</style> tags on the page, and if you want to apply it to all your tables, you can add it to Custom CSS field in wpDataTables settings/Custom JS and CSS tab.
Hi!
The URL shows an example of the product information table we use wpDataTables for. We keep the width of the table very narrow on purpose, so it can be displayed without scrolling on smartphones. (it´s only two columns anyway).
But we still do need to make the table scrollable, in case it doesn´t fit on a smartphone. That does happen frequently, because the table is translated into different languages, some of which require much longer description texts than others (as do some of our products). That´s also the reason why we cannot use fixed width on the table columns, what looks good with one product in one language looks bad with another product in a different language. So scrollable is better.
HOWEVER on some machines (notably: windows PC), the scrollbar appears even when not necessary, and is much wider than the table itself. That doesn´t look good, and we need to get rid of that behaviour without losing the ability to scroll when needed.
Thank you for any suggestions how to solve this!
Florian
Hi again Florian.
Word Wrap can be enabled with scrollable tables by adding some custom CSS:
table.wpDataTable td, table.wpDataTable th { white-space: normal !important; }Scroll function is based on auto-width, so for tables with fixed with and scroll option it has to be modified.
If you wish to hide the scroll bar, you can use this:
.wpDataTablesWrapper div.wdtscroll { overflow-x: visible !important; }I hope that helps.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hello again Aleksandar!
I want to refer back to this answer you sent some time ago. Where would I need to put the
.wpDataTablesWrapper bit, to hide the scrollbar? Is it supposed to go into a <style> tag on the page?
Thank you again!
Cheers
Florian
Hi again Florian
If you want to apply it only to one table, then it should go in between the <style>...</style> tags on the page, and if you want to apply it to all your tables, you can add it to Custom CSS field in wpDataTables settings/Custom JS and CSS tab.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Ah, I see, thank you...
I tried it, but found that
removes the scrollbar completely, even on smartphones, where I need them.
I tried
instead, and that seems to give the desired result: scrollbars when needed, none when not. But I´m still testing...
Hi again Florian
If your tests fail to provide correct results, you may want to try applying different CSS for mobile devices using media queries.
Something like this:
@media only screen and (min-width: 360px) and (max-width: 767px) { table.wpDataTable { table-layout: fixed !important; } .wpDataTablesWrapper table.wpDataTable td ,.wpDataTablesWrapper table.wpDataTable > thead > tr > th{ padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; white-space: normal !important; } }This is just an example, but I'm sure you'll understand what I'm referring to.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables