Table Width?

Hello:

I have tables on my site in some articles and when they're displayed on mobile devices, they're broken down and become very un-organized.

What can I do to fix this problem?

Thanks,

Michael K.

Tables are part of html language that doesn't behave well on responsive sites. Sadly - you need to decide on your own how to treat them. Perhaps hiding them completely on small devices might be a solution? Or you might decide to allow uesers to horizontally scroll the table, but it is not the best user experience, as most of them will not know it is even possible.

Tables are part of html language that doesn't behave well on responsive sites. Sadly - you need to decide on your own how to treat them. Perhaps hiding them completely on small devices might be a solution? Or you might decide to allow uesers to horizontally scroll the table, but it is not the best user experience, as most of them will not know it is even possible.

Thank you for the information.

Is there any responsive coding within the CSS of the template that is making it responsive that I can disable to make it stop?

Tables are set to fill maximum width, so I'm afraid there is no easy way to stop.
Could you please post an url to your site - to a sample page where I can see this issue? Perhaps I'll be able to find other way to fix this.

Tables are set to fill maximum width, so I'm afraid there is no easy way to stop.
Could you please post an url to your site - to a sample page where I can see this issue? Perhaps I'll be able to find other way to fix this.

Sure, the url is here: http://tucsonpatriots.com/patriots-player-news/item/299-possible-patriots-ka-deem-carey

I will private message you the temporary login credentials as the site is offline.

I was hoping the data was not that long... Well, the only thing that comes to my mind is to hide the tables from mobile view completely. Will that suit your needs?

I was hoping the data was not that long... Well, the only thing that comes to my mind is to hide the tables from mobile view completely. Will that suit your needs?

Yea I actually really need it in there. Is there no possible way to have the table scroll left to right and I can put a info div above each table saying to scroll left to right on mobile devices?

Just wondering if anybody has figured this out? I have been racking my brain over this for the last two weeks and I just can not figure out why the table is broken down in to a list and where to find the code to change that.

Currently your site is password protected.
Please send me a PM with:
1. URL to your website
2. login and password of user with login privileges (please create one for me)
3. link to this thread

Could you please enable "CSS override" in template settings - advanced section?
After that please write back.

Could you please enable "CSS override" in template settings - advanced section?
After that please write back.

Okay it's enabled.

Please try to add this code to override.css:

Code: Select all

@media only screen and (max-width: 580px) {
   #gkMainbody table {
      width: 100%!important;
      height: auto !important;
   }
   #gkMainbody table tr {
      display:table-row !important;
   }
   #gkMainbody table td {
      display:table-cell !important;
   }
   #gkMainbody table tr,
   #gkMainbody table th,
   #gkMainbody table td {
      -webkit-box-sizing: content-box !important;
      -moz-box-sizing: content-box !important;
      box-sizing: content-box !important;
      width: inherit !important;
   }
}

#gkMainbody table:before {
   content: "Scroll horizontally to view the whole table";
   height: 14px;
   width: 100%;
   display: block;
   font-size: 10px;
   margin-top: -30px;
   margin-bottom: 10px;
   font-family: Arial, sans-serif;
}
#gkMainbody table {
   width: 900px!important;
   display: block!important;
   padding: 30px 0 20px 0;
   overflow:scroll;
   -webkit-overflow-scrolling:touch;
}
#gkMainbody table tbody,
#gkMainbody table thead,
#gkMainbody table tfoot {
   width: 900px!important;
   display: table;
}
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: 320px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: 640px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (min-device-pixel-ratio: 2) {
   #gkMainbody table {
      width: 260px!important;
   }
}
@media only screen and (max-width: 480px) and (orientation:landscape), only screen and (max-device-width: 480px) and (-moz-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (-o-max-device-pixel-ratio: 1.5/1) and (orientation:landscape), only screen  and (max-device-width: 480px) and (-webkit-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 960px) and (-moz-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:landscape), only screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (min-device-pixel-ratio: 2) and (orientation:landscape) {
   #gkMainbody table {
      width: 420px!important;
   }
}


Its a quite huge hack and such functionality was never designed for this template so it might not work correctly on all devices (you need to test it on your own).

Please try to add this code to override.css:

Code: Select all

@media only screen and (max-width: 580px) {
   #gkMainbody table {
      width: 100%!important;
      height: auto !important;
   }
   #gkMainbody table tr {
      display:table-row !important;
   }
   #gkMainbody table td {
      display:table-cell !important;
   }
   #gkMainbody table tr,
   #gkMainbody table th,
   #gkMainbody table td {
      -webkit-box-sizing: content-box !important;
      -moz-box-sizing: content-box !important;
      box-sizing: content-box !important;
      width: inherit !important;
   }
}

#gkMainbody table:before {
   content: "Scroll horizontally to view the whole table";
   height: 14px;
   width: 100%;
   display: block;
   font-size: 10px;
   margin-top: -30px;
   margin-bottom: 10px;
   font-family: Arial, sans-serif;
}
#gkMainbody table {
   width: 900px!important;
   display: block!important;
   padding: 30px 0 20px 0;
   overflow:scroll;
   -webkit-overflow-scrolling:touch;
}
#gkMainbody table tbody,
#gkMainbody table thead,
#gkMainbody table tfoot {
   width: 900px!important;
   display: table;
}
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: 320px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: 640px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (min-device-pixel-ratio: 2) {
   #gkMainbody table {
      width: 260px!important;
   }
}
@media only screen and (max-width: 480px) and (orientation:landscape), only screen and (max-device-width: 480px) and (-moz-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (-o-max-device-pixel-ratio: 1.5/1) and (orientation:landscape), only screen  and (max-device-width: 480px) and (-webkit-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 960px) and (-moz-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:landscape), only screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (min-device-pixel-ratio: 2) and (orientation:landscape) {
   #gkMainbody table {
      width: 420px!important;
   }
}


Its a quite huge hack and such functionality was never designed for this template so it might not work correctly on all devices (you need to test it on your own).

So far this works amazingly. Thank you for all of your help "Cyberek"! I greatly appreciate it!

I'm happy this solution works... It took me a while to prepare a correctly working one.
If there are any issues with the solution, please let me know.