I'd like to get my table on my phone to scroll. I know it is too big to fit - but I'd like to scroll it.
It currently wont. I've tried width=100%
no luck...
Seems like a simple request - wondering if viewport has anything to do with it. I'd prefer to keep the viewport format though - as things display better with it.
<meta name="viewport" content="initial-scale=1.0; user-scalable=1;">
<table cellpadding=5 border=1 cellspacing=0>
<tr bgcolor=d7d7d7>
<td>Location</td>
<td>This</td>
<td>Size</td>
<td>That</td>
<td>Weight</td>
<td>Grade</td>
<td>Manufacturer</td>
<td>Date</td>
<td>This</td>
<td>KG</td>
<td>Feet</td>
<td>Lbs</td>
</tr>
<tr>
<td>Data Location</td>
<td>More Data</td>
<td>More Data</td>
<td>More Data</td>
<td>More Data</td>
<td>More Data</td>
<td>Manufacturer</td>
<td>Date</td>
<td>More Data</td>
<td>5555</td>
<td>6666</td>
<td>4444</td>
</tr>
</table>
Wrap the table inside a div
with overflow-x:auto
<div style='overflow-x:auto'>
<table cellpadding=5 border=1 cellspacing=0>
<tr bgcolor=d7d7d7>
<td>Location</td>
<td>This</td>
<td>Size</td>
<td>That</td>
<td>Weight</td>
<td>Grade</td>
<td>Manufacturer</td>
<td>Date</td>
<td>This</td>
<td>KG</td>
<td>Feet</td>
<td>Lbs</td>
</tr>
<tr>
<td>Data Location</td>
<td>More Data</td>
<td>More Data</td>
<td>More Data</td>
<td>More Data</td>
<td>More Data</td>
<td>Manufacturer</td>
<td>Date</td>
<td>More Data</td>
<td>5555</td>
<td>6666</td>
<td>4444</td>
</tr>
</table>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With