title: How to create a responsive scrollable table?
body: <p>I tried with this for create a scrollable table, for a responsive design. But not working. If this is not possible, how I do?</p>
  
  <pre><code>@media screen and (max-width: 640px) {
  table {
      overflow-x: auto;
      display: inline-block;
  }
  }
  </code></pre>
  
  <p>The HTML code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr class="col"&gt;
            &lt;td id="col-1"&gt;
                 Servidor
            &lt;/td&gt;
            &lt;td id="col-2"&gt;
                 Calidad
            &lt;/td&gt;
            &lt;td id="col-3"&gt;
                 Idioma
            &lt;/td&gt;
            &lt;td id="col-4"&gt;
                 Enlace
            &lt;/td&gt;
       &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The CSS code:</p>
  
  <pre><code>#movie-links #links-info tr {margin: 0;}
  #movie-links #links-info .col {background: #F1F1F1; border-bottom: 1px solid #CACACA; float: left; color: gray; padding: 10px;}
  #movie-links #links-info .col td {margin: 0;}
  #movie-links #links-info #col-1 {width: 150px;}
  #movie-links #links-info #col-2 {width: 200px;}
  #movie-links #links-info #col-3 {width: 150px;}
  #movie-links #links-info #col-4 {width: 300px;}
  </code></pre>