title: Table not taking up 100% of the screen width
body: <p>I have a table of items that look like <a href="http://imgur.com/9L24dkA" rel="nofollow">this</a></p>
  
  <p>As you can see, the table does not take up the entire width of the screen(the width of that image is the width of the screen, this app is being designed for mobile devices)</p>
  
  <p>The HTML that is generated to display this looks like this:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;span style="display: table; min-width: 320px; max-width: 640px; border-top: 1px solid #f6f6f6; width: 100%;"&gt;
                      &lt;div style="display: table-row;"&gt;
                          &lt;div style="display: table-row; float: left;"&gt;
                              &lt;div&gt;&lt;b&gt;R8,383.00&lt;/b&gt;&lt;/div&gt;
                              &lt;div&gt;
                                  &lt;img style="float: left;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px"&gt;
                                  Emirates
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="display: table-row; float: left;"&gt;
                              &lt;div&gt;
                                  &lt;div&gt;
                                      &lt;span&gt;&lt;b&gt;13:30&lt;/b&gt;&lt;/span&gt; - 07:00
                                  &lt;/div&gt;
                                  &lt;div style="display: table-row;"&gt;18h 30m, 1-stop&lt;/div&gt;
                             &lt;/div&gt;
                              &lt;div&gt;
                                 &lt;div&gt;
                                     &lt;span&gt;&lt;b&gt;14:25&lt;/b&gt;&lt;/span&gt; - 16:25
                                  &lt;/div&gt;
                                  &lt;div style="display: table-row;"&gt;25h 0m, 1-stop&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div  style="display: table-row; float: right;"&gt;
                              &lt;img style="float: right;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I didn't bother including the styles that colors the fonts. The only reason that the image is even that wide, is because I set a minimum width of 320px, and then made the last image float right.</p>
  
  <p>Setting min-width to 100% <em>does not work</em>. I'm at my wits end here, and I would really appreciate some help if anyone can lend it.</p>