Menu
I know there are a lot of questions already posted on this stack about responsive tables but trust me I've been through all of them and haven't found the solution to my problem. Or maybe I didn't know exactly what I was looking for which is why I'm forced to ask a question here.
The problem at hand is pretty simple. I'm making a wordpress site. I didn't exactly like the theme pricing table so I took up the challenge to make my own. Here is the link to my Wordpress page where I need this table: http://www.desklers.com/uae/undergraduate-packages
So my table is fine but I'm having trouble making it responsive. The following is the html I'm putting in the raw html widget of my visual composer in 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;
}
.features-table td
{
height: 50px;
line-height: 50px;
padding: 0 20px;
border-bottom: 1px solid #cdcdcd;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
white-space: nowrap;
text-align: center;
}
/*Body*/
.features-table tbody td
{
text-align: center;
}
.features-table tbody td:first-child
{
width: auto;
text-align: left;
}
.features-table td:nth-child(2), .features-table td:nth-child(3), .features-table td:nth-child(4)
{
background: #DADADA;
background: #E3E3E3;
border-right: 1px solid white;
}
.features-table tr:nth-child(even)
{
background: #e7f3d4;
background: #E3E3E3;
}
/*Header*/
.features-table thead td
{
font-family: 'Open Sans';
font-size: 16;
color: white;
line-height:16px;
font-weight:100;
font-variant:small-caps;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top: 1px solid #eaeaea;
}
.features-table thead td:first-child
{
border-top: none;
}
/*Footer*/
.features-table tfoot td
{
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom: 1px solid #dadada;
}
.features-table tfoot td:first-child
{
border-bottom: none;
}
</style>
<div id="main">
<table class="features-table">
<thead>
<tr>
<td></td>
<td style="background-color:#000000;"><div class="box">
<div class="ribbon"><span>FEATURED</span></div><p style=" color: white; font-size:30px; font-weight:100;"> Unlimited</p></div></td>
<td style="background-color:#229BAA;"><p style=" color: white; font-size:30px; font-weight:100;">Premium</p></td>
<td style="background-color:#FEFEFE;"><p style=" color: black; font-size:30px; font-weight:100;">Basic</p></td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
<td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
<td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td id="price" style="background-color:#000000;">$5000</td>
<td id="price" style="background-color:#2BC2D5;">$3000</td>
<td id="price" style="background-color:#FEFEFE; color:black;">$1500</td>
</tr>
<tr id="one">
<td>Number of Colleges Universities</td>
<td>20</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Number of Countries you can apply</td>
<td>Unlimited</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>Money Back Guarantee</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>High school planning</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Academic advising and coaching</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Transcript evaluations</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Admission Documents Handling</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance in SAT, ACT and Subject Tests</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>SAT, ACT and Subject Tests Preparation and Coaching</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Athletic Recruitment</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance in selecting best fit colleges</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Developing and finalizing a college list</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance and coaching about how to write winning Application Essays and Supplements</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Proof reading and feedback on College Essays and Supplements</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Discussing, helping, developing and finalizing College Ideas for Essays and Supplements</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Proof Reading and finalizing Application Essays and Supplements</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Letters of Recommendation</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Leadership opportunities</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Summer strategies</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Social Work Opportunities</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Extra-Curricular activities guidance</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance in Scholarship applications</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Assistance in filling scholarship applications</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance in CSS and other financial aid applications</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Assistance in filling CSS and other financial aid applications</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Follow-ups</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Visa Application Guidance and Handling</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
</tbody>
</table>
</div>
</body>
Here is the JSfiddle to my code: https://jsfiddle.net/d96q4h3d/
Using the media query, and setting overflow-x to auto, I have been able to make my table drag-able along x-axis. However I want the table to appear in full when the page loads so that the user can see the full table. Then he can zoom in any particular part if he wants to look at it closely.
Any help on the problem would be appreciated. I have done a lot of research on google but have been unable to find a particular solution that explains how I can view the complete table on the page.
Thanks
560
You can make tables responsive. Responsive tables will become smaller when possible. If not possible, they can read just their format so that mobile users can still read and use them. Like other website elements, tables should be responsive.
To create a responsive table with Bootstrap, use the table-responsive class.
First, in Docs, click the Insert button at the top of the document, then hover over the table option and select the dimensions for your table. Next, while still in Google Docs, enter the information into the table which makes formatting easier, and you won't be able to change the rows and columns later on in WordPress.
First remove white-space: nowrap;
now you would have to make the table max-width:(the size that you want)
like in the example the max-width is 900px : https://jsfiddle.net/d96q4h3d/7/
if you would like to make the table smaller, you would have to reduce the size of the <thead> tags, and the "#price" id like this
@media screen and (max-width: 800px) {
.features-table thead p {
font-size: 20px !important;
}
#price {
font-size: 20px;
}
}
@media screen and (max-width: 600px) {
.features-table thead p {
font-size: 15px !important;
}
#price {
font-size: 15px;
}
.features-table td{
padding: 0px 10px;
}
}
And always put your @media screen in the end of the of the bottom, not on the top!
133
Have you considered adopting a WordPress theme based on the Bootstrap toolkit?
If you do that you can use this sort of pattern to emit your table, and it will be responsive without all kinds of hassles.
<div class="table-responsive">
<table class="table">
your table
</table>
</div>
Bootstrap is a really good way to get responsive tables and other ui elements; its developers have done a great job debugging things for all sorts of browsers.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
