title: Responsive Table- 2 columns with header on left side of rows
body: <p><a href="https://i.stack.imgur.com/XQbvl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XQbvl.png" alt="Table - Desktop View"></a></p>
  
  <p>How would I make this table in the image above responsive with css, under 600px? </p>
  
  <p>Wherein the 1st and 3rd columns are "headers" that turn into a simple list view on screens under 600px, like such-</p>
  
  <p><a href="https://i.stack.imgur.com/OQ247.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OQ247.png" alt="Table - Mobile View"></a></p>
  
  <p><a href="https://jsfiddle.net/bycxL65r/7" rel="nofollow noreferrer">https://jsfiddle.net/bycxL65r/7</a></p>
  
  <pre><code>&lt;style&gt;
  .details td {
    color: #000;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: dotted #555555 1px;
    background-color: transparent;
    font-size: 16px;
  }
  
  .details td strong {
    text-transform: uppercase;
  }
  
  .details {
    border: none;
  }
  
  @media only screen and (max-width: 600px)  { }
  &lt;/style&gt;
  
  &lt;div class="details"&gt;
    &lt;table width="100%"&gt;
      &lt;thead&gt;&lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td style="text-align: left; width: 6%;"&gt;&lt;span&gt;&lt;strong&gt;Led by:&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align: left; width: 31%;"&gt;&lt;span&gt;&lt;strong&gt;Corey Parker&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align: left; width: 10%;"&gt;&lt;span&gt;&lt;strong&gt;Location:&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align: left; width: 49%;"&gt;&lt;span&gt;The BGB Studio, 10999 Riverside Dr., Suite 301, North Hollywood, CA 91602&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr style="background-color: transparent !important;"&gt;
          &lt;td style="text-align: left; width: 6%;"&gt;&lt;span&gt;&lt;strong&gt;Dates:&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align: left; width: 31%;"&gt;&lt;span&gt;April 9 - May 14. Sign up NOW as this class fills fast!&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align: left; width: 10%;"&gt;&lt;span&gt;&lt;strong&gt;Requirements:&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align: left; width: 49%;"&gt;&lt;span&gt;&lt;span style="font-size: 12pt;"&gt;&lt;span&gt;By application or invitation only. For actors who are auditioning consistently. &lt;/span&gt;&lt;/span&gt;&lt;span style="font-size: 12pt;"&gt;There are no make-ups for this 6-week class. &lt;a style="color: #cd2427;" href="http://bramongarciabraun.com/cancellation-policy/"&gt;(Cancellation Policy)&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td style="text-align: left; width: 6%;"&gt;&lt;span&gt;&lt;strong&gt;Duration:&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align: left; width: 31%;"&gt;&lt;span&gt;&lt;span&gt;6 weeks. Mondays, 7pm - 10pm.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;
  &lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align: left; width: 10%;"&gt;&lt;span&gt;&lt;strong&gt;Cost:&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align: left; width: 49%;"&gt;&lt;span&gt;$480 for the entire 6-week program. 2 installments ($270 &amp;amp; $210).
  &lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>