title: Problems displaying a table on mobile version of my site
body: <p>I've been trying to fix this issue for 10 days now and still i couldn't find any solution. </p>
  
  <p>I have a table that shows perfectly on desktop version but on mobile it gets out of the page area, i tried also @media screen max width 600px to modify the size of the table and overflow hidden but still not working, i will paste the code below:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      table {
          border-collapse: collapse;
          width: 100%;
      }
  
      td {
          border: 1px solid #d3d3d3;
          text-align: center;
          white-space: nowrap;
      }
  
      th {
          background-color: #0288D1;
          border: 2px solid #d3d3d3;
          text-align: center;
          font-size: large;
          color: white;
          text-transform: uppercase;
      }
  &lt;/style&gt;
  
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th colspan="4" style="background-color:#0277BD"&gt;&lt;strong&gt;Some Text Here&lt;strong&gt;&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;
  &lt;th&gt;&lt;strong&gt;Some Text Here&lt;/strong&gt;&lt;/th&gt;
              &lt;th&gt;&lt;strong&gt;Some Text Here&lt;/strong&gt;&lt;/th&gt;
              &lt;th&gt;&lt;strong&gt;Some Text Here&lt;/strong&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;a rel="nofollow" target="_blank" href="https://somesite.com/play"&gt;&lt;img width="200" height="80" src="https://somesite.com/image.png" alt="Some Text Here"&gt;&lt;/a&gt;
              &lt;/td&gt;
  
              &lt;td&gt;&lt;strong&gt;&lt;font color="green"&gt;Some Text Here&lt;/font&gt;&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Some Text Here&lt;/td&gt;
  
              &lt;td&gt;
                  &lt;div&gt;
                      &lt;button class="playblock" style="display:block;width:150px;height:50px;background-color:#4CAF50;margin-bottom:5px;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='#4CAF50'" onclick="window.location.href = 'https://somesitehere.com/play';"&gt;PLAY&lt;/button&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      &lt;button class="reviewblock" style="display:block;width:150px;height:50px;background-color:#EB9C12;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='orange'" onMouseOut="this.style.backgroundColor='#EB9C12'" onclick="window.location.href = 'https://somesitehere.com/see/';"&gt;REVIEW&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>