Bootstrap: fluid table too wide for window

O

6

22

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.

Ox answered 6/2, 2013 at 9:16 Comment(0)

S

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;
}

Six answered 6/2, 2013 at 15:28 Comment(4)

actually, I had to set it to 'none', I let you edit your answer. Thanks a lot : ) – Ox 6/2, 2013 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. – Six 6/2, 2013 at 15:33

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

TheGeorgeL what are some of these better methods? – Buford 23/6, 2016 at 21:53

A

33

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


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

Angola answered 20/9, 2013 at 17:9 Comment(3)

Oh, thanks! You are right. That was the only thing that worked for me as well (Bootstrap 3). – Spathe 30/9, 2015 at 17:30

For me too (Bootstrap 5.1.3). Thank you. – Behn 13/11, 2021 at 0:40

It works! Thanks a lot! – Hyehyena 2/10, 2023 at 14:48

R

25

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.

Redstone answered 21/3, 2014 at 0:34 Comment(3)

thanks, this helped me resolve my similar issue, upvote – Sherrillsherrington 15/3, 2016 at 9:39

definitely the best answer here – Xantho 10/5, 2018 at 10:0

This should be marked as the best answer, clean and uses what already exists in bootstrap – Mucilage 6/5, 2019 at 8:30

S

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;
}

Six answered 6/2, 2013 at 15:28 Comment(4)

actually, I had to set it to 'none', I let you edit your answer. Thanks a lot : ) – Ox 6/2, 2013 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. – Six 6/2, 2013 at 15:33

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

TheGeorgeL what are some of these better methods? – Buford 23/6, 2016 at 21:53

T

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'>

Tourneur answered 5/5, 2013 at 22:28 Comment(0)

A

0

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

Apodaca answered 28/9, 2013 at 19:52 Comment(0)

C

-1

I found solution somewhere in internet...

table {table-layout:fixed}

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

Carce answered 28/8, 2013 at 9:14 Comment(0)

Recommended topics

Hot tags