<table role="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mdo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mdo">@mdo</a></td>
                </tr>
                <tr>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td><a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/twbootstrap/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/twbootstrap">@twbootstrap</a></td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/fat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/fat">@fat</a></td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td><a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/twitter/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/twitter">@twitter</a></td>
                </tr>
              </tbody>
            </table>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/b3523f85066ecca709b23eca7f55e124ced7b226abfb51e922fcc408e6389181/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343638343735322f3634363533342f31656538643830382d643364332d313165322d393962652d3638643763326538663934312e706e67"><img src="https://camo.githubusercontent.com/b3523f85066ecca709b23eca7f55e124ced7b226abfb51e922fcc408e6389181/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343638343735322f3634363533342f31656538643830382d643364332d313165322d393962652d3638643763326538663934312e706e67" alt="image" data-canonical-src="https://f.cloud.github.com/assets/4684752/646534/1ee8d808-d3d3-11e2-99be-68d7c2e8f941.png" style="max-width: 100%;"></a></p>
<p dir="auto">Hi,</p>
<p dir="auto">I'm building an application with Twitter Bootstrap one of the reasons because I need it to be responsive and readable with hand-held devices.</p>
<p dir="auto">The responsive layout works like a charm, but tables not so much, they have a fixed min width where they can't go any thiner, I get that, but it would be <strong>so cool</strong> if the tables would be responsive, meaning when they can't go any thinner they change their layout to show the information somehow to fit the screen.</p>
<p dir="auto">I don't know how would you achieve this, maybe changing the scale (or zoom) on the table so it go smaller, since on a hand-held you can zoom in with a pinch.</p>
<p dir="auto">Is there an easy solution to solve this?</p>
<p dir="auto">Thanks!</p>