Having scoured numerous posts on responsive tables in this stack, I am still unable to find a solution to my specific issue. It's quite possible that I didn't know what exactly to look for, hence my resorting to posting a question here.
The crux of the matter is simple: I'm constructing a WordPress site and decided to create my own pricing table as I wasn't satisfied with the theme's version. You can view the table on my Wordpress page by following this link:
While the table itself looks good, I'm struggling with making it responsive. Below is the HTML I've inserted into the raw HTML widget of Visual Composer within WordPress:
<style type="text/css">
/*General styles*/
/*Features table------------------------------------------------------------*/
@media screen and (max-width: 640px) {
.features-table {
overflow-x: auto;
display: block;
}
}
.features-table {
font-family:'Open Sans';
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
text-shadow: 0 1px 0 #fff;
color: #2a2a2a;
background: #fafafa;
background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
}
#check {
color: #26CCA4;
font-size:20px;
}
#cross {
color: #E74A4A;
font-size: 20px;
}
...
...
/*Remaining code removed for brevity*/
</tbody>
</table>
</div>
</body>
You can access the JSfiddle with my complete code here: https://jsfiddle.net/d96q4h3d/
I have managed to make my table draggable along the x-axis using a media query and setting overflow-x to auto. However, I wish for the table to display in its entirety upon page load so users can view the full content at once, enabling them to zoom in on specific sections if needed.
Any assistance regarding this dilemma would be greatly appreciated. Despite extensive Google searches, I haven't come across a definitive solution explaining how to showcase the complete table on the page initially.
Thank you!