6

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>
Manish Patel
  • 3,648
  • 1
  • 14
  • 22
Merle_the_Pearl
  • 1,391
  • 3
  • 18
  • 25
  • http://zurb.com/playground/responsive-tables look at this. It will help you out. – Veer Nov 18 '16 at 04:15
  • 1
    Possible duplicate of [Add horizontal scrollbar to html table](http://stackoverflow.com/questions/5533636/add-horizontal-scrollbar-to-html-table) – hilda_sonica_vish Nov 18 '16 at 04:51
  • if you use bootstrap you can add the class of table-responsive which will allow horizontal scrolling of a table that is too wide for the viewport. – gavgrif Nov 18 '16 at 04:54

1 Answers1

21

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>
Jones Joseph
  • 4,703
  • 3
  • 22
  • 40