bootstrap responsive table content wrapping

Question

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?

Answer 1

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> 

Answer 2

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