title: Responsive Tables with CSS
body: <p>I have a simple table which if viewed on desktop resolution will display as a normal html table of data. But for mobile devices I want the display to be a little diff.
  HTmL code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;Booking Time&lt;/th&gt;
          &lt;th&gt;Pax&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Mobile&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;07:30PM&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;Kevin&lt;/td&gt;
          &lt;td&gt;0104321248&lt;/td&gt;
          &lt;td&gt;advoworks@hotmail.com&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;08:30PM&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;John&lt;/td&gt;
          &lt;td&gt;01241234123&lt;/td&gt;
          &lt;td&gt;greatone@hotmail.com&lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>Desktop will display table headers and data rows as per normal.</p>
  
  <p>Mobile version of the table should hide the table headers, and display the data in a 3 row format such as:</p>
  
  <pre><code>Time, Pax
  Name, Phone number
  Email
  </code></pre>
  
  <p>Basically the mobile version will have 3 "rows" for each row of table data, with the original table header hidden.</p>
  
  <p>What I have for CSS now is to hide the table header, but I'm stuck where it comes to rearranging the  columns into rows. </p>
  
  <pre><code>@media only screen and (max-width: 760px)  {
  
  th {
      display: none;
  }
  }
  </code></pre>
  
  <p>Can someone point me in the right direction?</p>