84

When a table's width exceed the span's width, like this page: http://jsfiddle.net/rcHdC/

You will see the table's content is outside of the span.

What would be the best method to cater this case?

Improve this question
1
  • What would you like to happen?
    – cimmanon
    Commented Mar 2, 2013 at 17:37

4 Answers 4

Reset to default
153

Bootstrap 3 now has Responsive tables out of the box. Hooray! :)

You can check it here: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Add a <div class="table-responsive"> surrounding your table and you should be good to go:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

To make it work on all layouts you can do this:

.table-responsive
{
    overflow-x: auto;
}
Improve this answer
6
  • 7
    But it only applies it to small devices (under 768px) :S Source: getbootstrap.com/css/#tables-responsive
    – VSP
    Commented Dec 9, 2013 at 15:16
  • 1
    To enable this on all size layouts, you can just drop the responsive styles from the 768 block in the foundation_and_overrides.css.scss file. Something like ``` .table-responsive { width: 100%; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } ```
    – genkilabs
    Commented Feb 14, 2014 at 21:19
  • 3
    @ase69s check my updated answer. Just now I needed it on a table with lots of columns. Adding overflow-x: auto in a custom CSS file does the trick for larger display layouts.
    – Leniel Maccaferri
    Commented Apr 14, 2014 at 23:31
  • You may like to add the border into that syle definition, too, for consistency: border: 1px solid #dddddd;
    – ptim
    Commented May 28, 2014 at 6:13
  • 2
    Might also want to add .table-responsive td, .table-responsive th { white-space:nowrap; } to ensure the cells don't automatically shrink and add line breaks.
    – rybo111
    Commented Aug 7, 2014 at 14:41
21

One option that is available is fooTable. Works great on a Responsive website and allows you to set multiple breakpoints... fooTable Link

Improve this answer
1
18

There are many different things you can do when dealing with responsive tables.

I personally like this approach by Chris Coyier:

You can find many other alternatives here:

If you can leverage Bootstrap and get something quickly, you can simply use the class names ".hidden-phone" and ".hidden-tablet" to hide some rows but this approach might to be the best in many cases. More info (see "Responsive utility classes"):

Improve this answer
3
  • 5
    +1 for the Coyer Link. I've used that in the past to great effect.
    – Fetchez la vache
    Commented Oct 15, 2013 at 9:57
  • Yup, Chris Coyer's solution is very neat. Much nicer than the one provided by bootstrap or zurbfoundation (they simply add horizontal scroll).
    – Adriano
    Commented Apr 9, 2015 at 16:00
  • As of now, January 2016, Coyier's and other's responsive stuff is 5 - 6 years old, before everyone started using Twitter Bootstrap.
    – Andrew Koper
    Commented Jan 31, 2016 at 19:30
1

If you are using Bootstrap 3 and Less you could apply the responsive tables to all resolutions by updatingthe file:

tables.less

or overwriting this part:

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

With:

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

Note how I changed the first line @screen-XX value.

I know making all tables responsive may not sound that good, but I found it extremely useful to have this enabled up to LG on large tables (lots of columns).

Hope it helps someone.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.