title: How to make my table collapse by row in mobile view
body: <p>I'm trying to add a responsive table to an iframe in my website. The table looks good in desktop but not in mobile view. I have tried the @media to make the table collapse by row so that the first cell of each row will become vertically aligned in one column.</p>
  
  <pre><code>|-------------------------------------------------|
  |    row head1      | data1 |              data2  |
  |-------------------------------------------------| &lt;--my table 
  |    row head2      | data3 |              data4  |
  
  
  |--------------------|
  |    row head1       |    &lt;- i want to have this in mobile view
  |--------------------|
  |    data1           |
  |--------------------|
  |    data2           |
  |--------------------|
  |    row head2       |
  |--------------------|
  |    data3           |
  |--------------------|
  |    data4           |
  |--------------------|
  </code></pre>
  
  <p>Anything I did wrong in the following?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style type="text/css"&gt;
  .tg  {border-collapse:collapse;border-spacing:0;border-color:#ffffff;}
  .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}
  .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}
  .tg .tg-iwtr{background-color:#34cdf9;color:#ffffff;vertical-align:top;}
  .tg .tg-yzt1{background-color:#efefef;vertical-align:top}
  .tg .tg-cxkv{background-color:#ffffff}
  .tg .tg-bsv2{background-color:#efefef}
  .tg .tg-3we0{background-color:#ffffff;vertical-align:top}
  .tg .tg-yw4l{vertical-align:top}
  @media all and (max-width: 479px) {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
      display: block ;
  
   
   
    }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tg-wrap"&gt;&lt;table class="tg" style="width: 100%;" &gt;
  &lt;colgroup&gt;
  &lt;col style="width: 110px"&gt;
  &lt;col style="width: 108px"&gt;
  &lt;col style="width: 418px"&gt;
  &lt;col style="width: 578px"&gt;
  &lt;/colgroup&gt;
    &lt;tr&gt;
      &lt;td class="tg-iwtr" rowspan="2"&gt;04/08/2017&lt;/th&gt;
      &lt;td class="tg-bsv2"&gt;11:00 – 12:30&lt;/th&gt;
      &lt;td class="tg-bsv2"&gt;data&lt;/th&gt;
      &lt;td class="tg-yzt1"&gt;data&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="tg-cxkv"&gt;15:00 – 17:00&lt;/td&gt;
      &lt;td class="tg-cxkv"&gt;data&lt;/td&gt;
      &lt;td class="tg-3we0"&gt;data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="tg-iwtr"&gt;05/08/2017&lt;/td&gt;
      &lt;td class="tg-yzt1"&gt;11:00 – 12:30&lt;/td&gt;
      &lt;td class="tg-yzt1"&gt;data&lt;/td&gt;
      &lt;td class="tg-yzt1"&gt;data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="tg-iwtr" rowspan="2"&gt;06/08/2017&lt;/td&gt;
      &lt;td class="tg-3we0"&gt;15:00 – 16:30&lt;/td&gt;
      &lt;td class="tg-3we0"&gt;data&lt;/td&gt;
      &lt;td class="tg-3we0"&gt;data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="tg-yzt1"&gt;16:30 – 18:00&lt;/td&gt;
      &lt;td class="tg-yzt1"&gt;data&lt;/td&gt;
      &lt;td class="tg-yzt1"&gt;data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="tg-iwtr" rowspan="2"&gt;07/08/2017&lt;/td&gt;
      &lt;td class="tg-3we0"&gt;15:00 – 16:30&lt;/td&gt;
      &lt;td class="tg-3we0"&gt;data&lt;/td&gt;
      &lt;td class="tg-3we0"&gt;data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="tg-yzt1"&gt;16:30 – 18:00&lt;/td&gt;
      &lt;td class="tg-yzt1"&gt;data&lt;/td&gt;
      &lt;td class="tg-yzt1"&gt;data&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>