Bootstrap: fluid table too wide for window

Question

I'm working on a project using twitter bootstrap. We have a table that has lots of columns and is going to be larger than the browser window almost every time.

This is what happens on the right :

The Problem

The table border stays in the browser window, while the table contents do not. If I scroll, the borders stay where they are, they do not "follow" the browser window.

You can see the problem on this jsfiddle. It works on Safari, not on Chrome or Firefox.

The layout is like this :

<body>
  <div class='container-fluid'>
    <div class='row-fluid'>
      <div class='span1'>
        ... menusidebar here...
      </div>
      <div class='span11'>
        <table class="table table-striped table-bordered" style="white-space: nowrap">
          <thead>
            <tr>
            </tr>
          </thead>
          <tbody>
            <tr>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

I hope you can help me. If you need more information, just ask, I'd be glad to supply.

This is a Rails 3.2 app, using the gem bootstrap-sass in version 2.2.1.1 (the problem appears in 2.2.2.0 too). The first three numbers reflect the bootstrap version.

score 30 · Answer 1 · answered Sep 20 '13 at 17:09

30

This was the only solution that worked for me...


    .table {
        max-width: none;
        table-layout: fixed;
        word-wrap: break-word;
    }

answered Sep 20 '13 at 17:09

diogoareia

343
3
7

Oh, thanks! You are right. That was the only thing that worked for me as well (Bootstrap 3). – Rav Sep 30 '15 at 17:30
For me too (Bootstrap 5.1.3). Thank you. – zeuf Nov 13 '21 at 00:40

score 24 · Answer 2 · edited Mar 21 '14 at 00:52

24

If you are on Bootstrap 3, another approach is to wrap your table in a

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

This makes the table responsive.

edited Mar 21 '14 at 00:52

andrewsi

10,807
132
35
51

answered Mar 21 '14 at 00:34

Shirren

249
2
4

1

thanks, this helped me resolve my similar issue, upvote – opensource-developer Mar 15 '16 at 09:39
definitely the best answer here – Skiff May 10 '18 at 10:00
This should be marked as the best answer, clean and uses what already exists in bootstrap – Clayton C May 06 '19 at 08:30

score 7 · Accepted Answer · edited Sep 04 '17 at 14:13

7

Bootstrap has the following style applied to Tables:

table {
    max-width: 100%;
}

If you override that property in your custom stylesheet it should hopefully solve the problem. Changing it to 'none' should work.

table {
    max-width: none;
}

edited Sep 04 '17 at 14:13

Jon Adams

24,464
18
82
120

answered Feb 06 '13 at 15:28

Billy Moat

20,792
7
45
37

actually, I had to set it to 'none', I let you edit your answer. Thanks a lot : ) – ksol Feb 06 '13 at 15:31
Hmm, strange as I had changed it to 'auto' via Firebug and that worked. Ah well, I'll change it to 'none' in my answer anyway. – Billy Moat Feb 06 '13 at 15:33
1

Note: This is now outdated, there's far better methods with the release of bootstrap3 and the upcoming bootstrap4 – GeorgeWL Apr 29 '16 at 11:53
4

TheGeorgeL what are some of these better methods? – ctb Jun 23 '16 at 21:53

score 4 · Answer 4 · answered May 05 '13 at 22:28

4

You can apply the style = "overflow: auto;" to put a horizontal scroll bar at your table. Thus the design will still remain responsive. Follow the code:

.table-scrollable{
    overflow: auto;
}

And use it on your div:

<div class='span11 table-scrollable'>

answered May 05 '13 at 22:28

Eduardo Arruda Pimentel

518
1
6
25

score 0 · Answer 5 · answered Sep 28 '13 at 19:52

0

Applying the style = "overflow: auto;" worked just fine for me

answered Sep 28 '13 at 19:52

user2245138

11
1

score -1 · Answer 6 · answered Aug 28 '13 at 09:14

-1

I found solution somewhere in internet...

table {table-layout:fixed}

It solve problems in Firefox & IE, with bootstrap 2 & 3

answered Aug 28 '13 at 09:14

Rafał Godziński

1

Bootstrap: fluid table too wide for window

6 Answers6

Linked