Table not taking up 100% of the screen width - html

Question

I have a table of items that look like this
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)
The HTML that is generated to display this looks like this:
<table>
<tbody>
<tr>
<td>
<span style="display: table; min-width: 320px; max-width: 640px; border-top: 1px solid #f6f6f6; width: 100%;">
<div style="display: table-row;">
<div style="display: table-row; float: left;">
<div><b>R8,383.00</b></div>
<div>
<img style="float: left;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
Emirates
</div>
</div>
<div style="display: table-row; float: left;">
<div>
<div>
<span><b>13:30</b></span> - 07:00
</div>
<div style="display: table-row;">18h 30m, 1-stop</div>
</div>
<div>
<div>
<span><b>14:25</b></span> - 16:25
</div>
<div style="display: table-row;">25h 0m, 1-stop</div>
</div>
</div>
<div style="display: table-row; float: right;">
<img style="float: right;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
</div>
</div>
</span>
</td>
</tr>
</tbody>
</table>
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.
Setting min-width to 100% does not work. I'm at my wits end here, and I would really appreciate some help if anyone can lend it.

Answer 1

What you want is width='100%' inline style. DEMO
100 % width table:
<table bgcolor='red' width='100%'>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
</table>
Fiddle DEMO: http://jsfiddle.net/xeemez/WJJBX/
Alternatively you can use CSS instead of inline tags like this:
table{
background:red;
width:100%; }

Answer 2

DEMO
if you have a try give <table width="100%"></table>
OR
you make class table{width:100%;} both of work
HTML
<table width="100%">
<tbody>
<tr>
<td>
<span style="display: table; min-width: 320px; max-width: 640px; border-top: 1px solid #f6f6f6; width: 100%;">
<div style="display: table-row;">
<div style="display: table-row; float: left;">
<div><b>R8,383.00</b></div>
<div>
<img style="float: left;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
Emirates
</div>
</div>
<div style="display: table-row; float: left;">
<div>
<div>
<span><b>13:30</b></span> - 07:00
</div>
<div style="display: table-row;">18h 30m, 1-stop</div>
</div>
<div>
<div>
<span><b>14:25</b></span> - 16:25
</div>
<div style="display: table-row;">25h 0m, 1-stop</div>
</div>
</div>
<div style="display: table-row; float: right;">
<img style="float: right;" src="../resources/img/icon_circle_footer.png" width="20px" height="20px">
</div>
</div>
</span>
</td>
</tr>
</tbody>
</table>
DEMO2
CSS
table{
background-color:yellow;
width:100%;
}

Answer 3

If you don't set a specific width for your table it will only take the space necessary to show the content it holds. So use width: 100%.

Answer 4

You should add width="100%" for parent table.
<table width="100%">

Answer 5

Please use div's, not tables :)
DEMO
width:100%;
Have a good day! :D
UPDATE:
Why not use tables for layout in HTML?

Answer 6

Only in <table> you can define width. Td might work, but to make sure it works the same everywhere you have to make it to <table width="_of_your_desire">
the same goes with the height - only this time height can be defined only in <td>.
Luck