引导中响应表的问题 [英] Issue on Responsive Tables in Bootstrap

问题描述

您可以查看，这至少有助于纠正表格宽度的问题。

  .table {
 table-layout：fixed 
} 
  

然后，你需要解决的话，不包装的问题，或更准确地说：不打破。考虑到这里缺乏控制，这可能是一个更大的麻烦，但有一个 word-break CSS属性。

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

正如你可能会注意到的，如果你避免没有短（ - ）或空格，因为它使浏览器任意选择拆分单词在包装的位置。在Chrome中，它甚至不会破坏子类型中的 / 。你最好在这些字符周围添加空格。它还可以在不需要换行的情况下提高人类的可读性。

有另一个CSS属性，你应该注意，但是你不需要在这里设置。 白色空间 启用或禁用一般的包装，但默认情况下它允许它（在 .table 的Bootstrap中是这种情况）。

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

解决方案

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).

这篇关于引导中响应表的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！