bootstrap responsive table content wrapping

Question

I have HTML similar to this        lt div class  table-responsive  gt            lt table class  table borderless  gt                lt caption gt                     lt h3 gt Announcements lt  h3 gt                lt  caption gt                lt tbody gt                    lt tr  gt                        lt td gt                                                                   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                                                               lt  td gt                    lt  tr gt                lt  tbody gt            lt  table gt        lt  div gt    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

User · Answer

So you can use the following    td     white-space  normal  important     To consider whitespace      If this doesn t work   td     white-space  normal  important     word-wrap  break-word      table     table-layout  fixed

User · Answer

just simply use as below and it will word wrap any long text within a table   No need to anything else   lt td style  word-wrap  break-word min-width  160px max-width  160px   gt long long comments lt  td gt

User · Answer

use it in css external file    td-table   word-wrap  break-word  word-break  break-all    white-space  normal  important  text-align  justify

User · Answer

The UberNeo response is Ok and i like it because you do not have to modify anything else except the TD  The only point is that you also have to add  white-space normal  to the style in order to maintain the responsive characteristics of the table  if not  at certain resolutions the wrap is not made and the scroll of the table does not appear   style  word-wrap  break-word min-width  160px max-width  160px white-space normal

User · Answer

Fine then  You can use CSS word wrap property  Something like this    td test    Give whatever class name you want      width 11em     Give whatever width you want    word-wrap break-word

User · Answer

Add your new class  tableresp  with table-responisve class and then add below code in your js file      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   lt  elm width              top edge   btn offset top  lt  elm height              right edge    table width - elm offsetleft   lt  elm width              bottom edge    tableoffbottom - btn offsetbottom   lt  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  gt  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    lt  320        positioning addClass  positioning            tableresp  dropdown  tableresp  adropup   css  position    static       else       positioning removeClass  positioning            tableresp  dropdown  tableresp  dropup   css  position    relative

User · Answer

The behaviour is on purpose      Create responsive tables by wrapping any  table in  table-responsive to make them scroll horizontally on small devices  under 768px   When viewing on anything larger than 768px wide  you will not see any difference in these tables    Which means tables are responsive by default  are adjusting their size   But only if you wish to not break your table s lines and add scrollbar when there is not enough room use  table-responsive class   If you take a look at bootstrap s source you will notice there is media query that only activates on XS screen size and it sets text of table to white-space  nowrap which causes it to not breaking   TL DR  Solution  Simply remove  table-responsive element class from your html code

User · Answer

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    lt style gt   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                 I hope this helps

User · Answer

x000D   x000D   table td abbreviation   x000D    max-width  30px  x000D    x000D   table td abbreviation p   x000D    white-space  nowrap  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D   x000D    x000D   lt table class  table  gt  x000D   lt tr gt  x000D    lt td class  abbreviation  gt  lt p gt ABC DEF lt  p gt  lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

EDIT  I think the reason that your table is not responsive to start with was you did not wrap in  container   row and  col-md-x classes like this one   lt div class  container  gt      lt div class  row  gt        lt div class  col-md-12  gt        lt  -- or use any other number  col-md- -- gt            lt div class  table-responsive  gt                lt div class  table  gt                lt  div gt            lt  div gt        lt  div gt      lt  div gt   lt  div gt    With this  you can still use  lt p gt  tags and even make it responsive   Please see the Bootply example here

[twitter-bootstrap] bootstrap responsive table content wrapping

Examples related to twitter-bootstrap

Examples related to responsive-design

Examples related to twitter-bootstrap-3

Examples related to html-table