title: How to convert table with merged cells to responsive design?
body: <p>I need to display data on desktop screens in a table as shown in <a href="https://jsfiddle.net/h3LgL9z1/" rel="nofollow">this fiddle</a>.</p>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .tg  {border-collapse:collapse;border-spacing:0;}
  .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
  .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
  .tg .tg-yw4l{vertical-align:top}
  .tg .tg-yw4l.tg-left{width:22%}
  .tg .tg-yw4l.tg-center{width:35%}
  .tg .tg-yw4l.tg-right{width:35%}
  .tg .tg-yw4l.tg-exleft{width:30%}
  .tg .tg-yw4l.tg-excenter{width:50%}
  .tg .tg-yw4l.tg-exright{width:20%}
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="tg"&gt;
    &lt;tr&gt;
      &lt;td class="tg-yw4l tg-left" rowspan="2"&gt;&lt;img src="http://dev.guitar-dreams.com/images/TAB.gif"&lt;/td&gt;
      &lt;td class="tg-yw4l tg-center"&gt;Title of Guitar Lesson&lt;/td&gt;
      &lt;td class="tg-yw4l tg-right"&gt;Category&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="tg-yw4l" colspan="2"&gt;Here is the description. If there is a lot of text here, then this cell's bottom edge should simply drop down, and the cell wit the image should corre ponsingly have its bottom edge drop down.&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
       &lt;td colspan="3"&gt;
          &lt;table class="tg" width=100%&gt; 
             &lt;tr&gt;
                &lt;td class="tg-yw4l" colspan="3"&gt;Exercises in this lesson&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td class="tg-yw4l tg-exleft"&gt;Exercise Title&lt;/td&gt;
                &lt;td class="tg-yw4l tg-excenter"&gt;Here is an exercise description. If the text is long, this cell's bottom edge should expand downward, along with other cells in this row.&lt;/td&gt;
                &lt;td class="tg-yw4l tg-exright"&gt;Media: Audio, Video&lt;/td&gt;
            &lt;/tr&gt;
  
          &lt;/table&gt;              
      &lt;/td&gt;   
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When viewed on mobile devices, I would like for all cells to be stacked vertically, so you would have</p>
  
  <pre><code>Lesson Image
  Lesson Title
  Lesson Category
  Lesson Description
  Exercises in Lesson
  Exercise Title
  Exercise Description
  Exercise Media
  </code></pre>
  
  <p>Any idea how I would either 1) implement this as a table that would have the behavior I described or 2) implement as divs that would mimic a table with the behaviors described? </p>