且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

引导中响应表的问题

更新时间:2023-09-18 20:01:22

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