Merle_the_Pearl Merle_the_Pearl - 19 days ago 5
CSS Question

HTML Table Scroll On Phone

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>




Answer

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>