Is it possible to make tables responsive and if so how do you do it? 
Author: Ross P.
Visited 1124,
Followers 3,
Shared 0
Looking at setting up a 4 generation pedigree for an animal on a webpage where there are some thumbnail images that can be clicked on to show further details of that particular animal, but my main concern is that the main table is not responsive for smaller screen sizes under 720px.
Can anyone help please - image of the table is attached.
Alternatively if anyone has a suggestion as to where a template like this (that ould be responsive) can be found that could be added to the page, I would be very grateful.
Thanks
Cheers, Ross
Posted on the
Ross, it is not possible to have a responsive table in WX5 unless you use 3rd party code (eg https://helpcenter.websitex5.com/en/post/232476)
Having looked at your table layout jpg why not simply layout a page in WX5 using rows and columns of cells? It will be responsive and you will have absolute control over the appearance for each resolution.
Author
Thanks Esahc..
Yes was thinking of that as another option which I may now look at doing.
Appreciate your time and help in replying.
Stay safe. Cheers Ross
Hello Roos,
Not by default but you can
Here my table on my PC
and on my mobile
Just add this CSS code into prpperties page
Enjoy!
Axel
Author
Thank you Axel, I will give that a go.
Appreciate your help
Kind regards Ross
(It > En) ... to be able to verify, it was better if you posted the LINK of the page ...
... it was my invention of several years ago, made for v.12, as taken from Axel's STAMP...
... also this Topic (and others) could help you:
https://helpcenter.websitex5.com/en/post/227312
... however, eventually the code should be conditioned for the reference breakpoint (719px)...
.
Author
Hi KolAsim
Thank you very much for your reply and assistance. The page is not live as yet because the client is trying to sort out an appropriate Domain Name but you might get an idea of the draft I am part way through from this link: http://127.0.0.1:8080/sire-stags.html
The image is of the lower than 480.9px view but the 719.9 - 480px view are the same.
Kind regards, Ross
... Hi Ross, ...unfortunately it is not a valid LINK, it is the local one of your PC...
... you have to export the example on the net in a test subdirectory, for example in:
www.yoursitename.en/test/index.html
.
Hello, ciao
.
Author
Hi KolAsim
Sorry thought because I could see it here that you migt be able to as well.
Have now uploaded the site and the page can be seen here:
http://www.forestroadfarm.pagans.nz/sire-stags.html
Hope this helps.
Kind regards
Ross
... OK ...
... my code, customized for your current page, for the reference selector #imCell_26 is this:
<style>
@media(max-width:719px) {
#imTableObject_14_26 table td {width:25% !important}
#imTableObject_14_26 table img {width:100% !important}
#imTableObject_14_26 {overflow-x: hidden !important}
}
</style>
... you have to paste the code in the Properties of the "sire-stags.html" Page, in this section:
>> Step 3 - Map > The 'Page Properties' window > Options in the Expert section | ▪Custom Code: > 3^ (third) option > Before closing the HEAD tag
... ... if you need other clarifications or help, let me know ...
... hello, ciao
.
Author
Thanks KolAsim
That is brillant, thank you so much.
Keep up the great assistance and stay safe.
Kindest regards
Ross
...
...