Bootstrap Responsive Table Content Wrapping

Answer :

just simply use as below and it will word wrap any long text within a table . No need to anything else

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

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

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

I hope this helps