html page table full width (zoom)

Question

I have a small table in HTML. It has 5x5 cells with the numbers 1-25 inside.

<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
...
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
</table>

I need that this table is displayed in full screen whether i open this page in my pc or in my mobile phone. I could use (width:100%), but i want the font-size to be changed dynamically as well.

Actually what i need is something like a zoom.

Is there workaround to achieve this?

Answer 1

You can use the following to render the table at full-width with a font-size relative to your device type's pixel density:

table {width:100%;font-size:1em;}

Setting the font-size in ems takes care of your mobile issue: http://jsfiddle.net/j8GyV/