Make a responsive table within 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!

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.

It's a hard problem since tables are inherently not responsive. There are many different ways of achieving a desired result. Many include the use of javascript.

Here's a good round-up of different techniques, including a really clever pure-CSS one (#8), which is my favourite.

http://exisweb.net/responsive-table-plugins-and-patterns

EDIT:

Since you need the entire table to be visible on mobile devices, a suitable solution for this case might be specifically:

https://github.com/ghepting/jquery-responsive-tables - DEMO