引导响应式表格内容包装

Posted 2023-03-05

【中文标题】引导响应式表格内容包装

【英文标题】：bootstrap responsive table content wrapping

【发布时间】：2014-03-02 12:10:54

【问题描述】：

我有类似这样的 html：

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

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

【问题讨论】：

无论我是否将内容放入

看看这个问题可能对你有帮助:) ***.com/questions/12195469/…

【参考方案1】：

只要这样做 style="word-wrap: break-word min-width:; max-width:;" 并设置你想要的width

【参考方案2】：

在 css 外部文件中使用它。

.td-table

word-wrap: break-word;
word-break: break-all;  
white-space: normal !important;
text-align: justify;

【讨论】：

删除 word-break 后效果很好：break-all;从答案。谢谢。

【参考方案3】：

使用 table-responisve 类添加新类“tableresp”，然后在 js 文件中添加以下代码

$(".tableresp").on('click', '.dropdown-toggle', function(event) 

    if ($('.dropdown-menu').length) 
        var elm = $('.dropdown-menu'),
            docHeight = $(document).height(),
            docWidth = $(document).width(),
            btn_offset = $(this).offset(),
            btn_width = $(this).outerWidth(),
            btn_height = $(this).outerHeight(),
            elm_width = elm.outerWidth(),
            elm_height = elm.outerHeight(),
            table_offset = $(".tableresp").offset(),
            table_width = $(".tableresp").width(),
            table_height = $(".tableresp").height(),

            tableoffright = table_width + table_offset.left,
            tableoffbottom = table_height + table_offset.top,
            rem_tablewidth = docWidth - tableoffright,
            rem_tableheight = docHeight - tableoffbottom,
            elm_offsetleft = btn_offset.left,
            elm_offsetright = btn_offset.left + btn_width,
            elm_offsettop = btn_offset.top + btn_height,
            btn_offsetbottom = elm_offsettop,

            left_edge = (elm_offsetleft - table_offset.left) < elm_width,
            top_edge = btn_offset.top < elm_height,
            right_edge = (table_width - elm_offsetleft) < elm_width,
            bottom_edge = (tableoffbottom - btn_offsetbottom) < elm_height;

        console.log(tableoffbottom);
        console.log(btn_offsetbottom);
        console.log(bottom_edge);
        console.log((tableoffbottom - btn_offsetbottom) + "|| " + elm_height);


        var table_offset_bottom = docHeight - (table_offset.top + table_height);

        var touchTableBottom = (btn_offset.top + btn_height + (elm_height * 2)) - table_offset.top;

        var bottomedge = touchTableBottom > table_offset_bottom;

        if (left_edge) 
            $(this).addClass('left-edge');
         else 
            $('.dropdown-menu').removeClass('left-edge');
        
        if (bottom_edge) 
            $(this).parent().addClass('dropup');
         else 
            $(this).parent().removeClass('dropup');
        

    
);
var table_smallheight = $('.tableresp'),
    positioning = table_smallheight.parent();

if (table_smallheight.height() < 320) 
    positioning.addClass('positioning');
    $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static');

 else 
    positioning.removeClass('positioning');
    $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative');

【参考方案4】：

这种行为是故意的：

通过将任何 .table 包装在 .table-responsive 以使它们在小型设备上水平滚动（小于 768 像素）来创建响应式表格。在宽度大于 768 像素的任何东西上查看时，您不会发现这些表格有任何区别。

这意味着表格默认是响应式的（正在调整它们的大小）。但只有当您不希望打破表格的线条并在没有足够空间时添加滚动条时才使用.table-responsive 类。

如果您查看bootstrap's source，您会注意到媒体查询仅在XS 屏幕尺寸上激活，并将表格文本设置为white-space: nowrap，使其不会中断。

TL;DR;解决方案

只需从您的 html 代码中删除 .table-responsive 元素/类。

【参考方案5】：

所以你可以使用以下内容：

td 
  white-space: normal !important; // To consider whitespace.

如果这不起作用：

td 
  white-space: normal !important; 
  word-wrap: break-word;  

table 
  table-layout: fixed;

【讨论】：

非常感谢，这对我来说是 bootstrap 的工作

它也适用于 bootstrap 4，无需删除 .table-responsive 类。

谢谢！这个css成功了。我刚刚粘贴，它适用于引导程序 4。

太棒了！！它在 Bootstrap 4 中非常适合我。

【参考方案6】：

.table td.abbreviation 
  max-width: 30px;

.table td.abbreviation p 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

<table class="table">
<tr>
	<td class="abbreviation"><p>ABC DEF</p></td>
</tr>
</table>

【讨论】：

请添加一些文字来描述您在做什么，以及此答案与其他现有答案的不同/更好之处。

【参考方案7】：

UberNeo 的响应很好，我喜欢它，因为除了 TD 之外您无需修改​​任何其他内容。唯一的一点是，您还必须在样式中添加“空白：正常”以保持表格的响应特性，如果没有，则在某些分辨率下不会进行换行并且表格的滚动不会出现。

style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;"

【参考方案8】：

编辑

我认为您的表格一开始没有响应的原因是您没有包含 .container、.row 和 .col-md-x 这样的类

<div class="container">
   <div class="row">
     <div class="col-md-12">
     <!-- or use any other number .col-md- -->
         <div class="table-responsive">
             <div class="table">
             </div>
         </div>
     </div>
   </div>
</div>

有了这个，你仍然可以使用<p>标签，甚至让它响应。

请参阅 Bootply 示例 here

【讨论】：

您好，我的答案已编辑，请检查一下？我想我找到了更好的方法。

【参考方案9】：

只需按如下方式使用，它将自动换行表格中的任何长文本。其他什么都不需要

<td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td>

【讨论】：

您好 UberNeo，您的回复有效，我喜欢它，因为除了 TD 之外您无需修改​​任何其他内容。唯一的一点是，您还必须在样式中添加“空白：正常”以保持表格的响应特性，如果没有，则在某些分辨率下不会进行换行并且表格的滚动不会出现。

值 160px 背后的原因是什么？

超级酷，它为我工作，谢谢保持祝福

【参考方案10】：

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

<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+ */
    

希望对你有帮助

【参考方案11】：

那好吧。您可以使用 CSS 自动换行属性。像这样：

td.test /* Give whatever class name you want */

width:11em; /* Give whatever width you want */
word-wrap:break-word;