Issue on Responsive Tables in Bootstrap

Question

Can you please take a look at THIS LINK and let me know why the tables contents inside this page are not acting responsive? I mean the table font.As you can see I have three tables in three columns and they look good on desktops but on tablets and smart phones not! I am really confused of using the span class in bootstrap and I am not sure that I did it correct here?

Thanks here is how they looks like in iPhone 4 and iPad 4

Answer 1

Twitter Bootstrap is responsive out of the box, but not necessarily to an adjusted layout. What it appears you need to do to me is to adjust the size of .well in your css to encompass the table on adjustment of the page size. .well is in a .span3, which Bootstrap auto adjusts to be smaller as you scale the window smaller...

Answer 2

They are acting responsive to me... what are you looking for? Bootstrap will not alter the font size based on tablet/mobile, only the containers and their behaviour (inline-block vs block, etc) are changed.

Answer 3

The problem is that the table feels the need to grow to a minimum length, and that minimum length is effectively the length of the contained strings.

You can try to work this out by "fix"ing the table-layout, which should at least help to correct the issue of the table's width.

.table {
    table-layout: fixed
}

Then, you need to fix the issue of words not wrapping, or more exactly: not breaking. This can be a much bigger nuisance given the lack of control here, but there is a word-break CSS property.

.table {
    word-break: break-all;
}

As you may notice, it helps if you avoid having very long words without dashes (-) or whitespace because it makes the browser arbitrarily choose where to split the word for wrapping. In Chrome, it does not even break on the / in the Sub Type. You would be better off adding spaces around such characters. It also improves human readability in cases where it does not need to wrap.

There is another CSS property that you should be aware of, but you do not need to set here. white-space enables or disables wrapping in general, but by default it allows it (and this is the case in Bootstrap for .table).