引导响应表内容包装 [英] bootstrap responsive table content wrapping

问题描述

我的HTML与此类似：

I have HTML similar to this:

    <div class="table-responsive">
         <table class="table borderless">
             <caption>
                  <h3>Announcements</h3>
             </caption>
             <tbody>
                 <tr >
                     <td>                                        
                         If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc.                                       
                     </td>
                 </tr>
             </tbody>
         </table>
     </div>

当我在一个小视口中查看输出时，表格的大小正确，但是表格单元格中的段落内容未包装，因此显示滚动条。我预计响应行为将包括段落内容。我该如何实现这一目标？

When I view the output in a small view-port, the table is re-sized properly, but the paragraph content in the table cells are not wrapped, so scroll-bars are shown. I expected the responsive behavior would have been to wrap the paragraph content. How do I achieve this?

推荐答案

我遇到了你所遇到的同样问题，但上述答案并没有解决我的问题。我能够解决它的唯一方法是创建一个类并使用特定的宽度来触发我的特定用例的包装。作为一个例子，我在下面提供了一个片段 - 但我发现你需要为相关的表调整它 - 因为我通常根据布局使用多个colspans。我认为Bootstrap失败的原因是因为它删除了包装约束以获得滚动条的完整表。 colspan必须绊倒它。

I ran across the same issue you did but the above answers did not solve my issue. The only way I was able to resolve it - was to make a class and use specific widths to trigger the wrapping for my specific use case. As an example, I provided a snippet below - but I found you will need to adjust it for the table in question - since I typically use multiple colspans depending on the layout. The reasoning I believe Bootstrap is failing - is because it removes the wrapping constraints to get a full table for the scrollbars. THe colspan must be tripping it up.

<style>
@media (max-width: 768px) { /* use the max to specify at each container level */
    .specifictd {    
        width:360px;  /* adjust to desired wrapping */
        display:table;
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }
}

我希望这有助于

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