引导响应式表格内容包装

Question

我有类似这样的 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>

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

Answer 1

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

Answer 2

在 css 外部文件中使用它。

.td-table
{
word-wrap: break-word;
word-break: break-all;  
white-space: normal !important;
text-align: justify;
}

Answer 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');

}

Answer 4

这种行为是故意的：

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

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

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

TL;DR;解决方案

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

Answer 5

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

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

如果这不起作用：

td {
  white-space: normal !important; 
  word-wrap: break-word;  
}
table {
  table-layout: fixed;
}

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

Answer 7

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

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

Answer 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

Answer 9

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

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

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

希望对你有帮助

Answer 11

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

td.test /* Give whatever class name you want */
{
width:11em; /* Give whatever width you want */
word-wrap:break-word;
}