0

I have table the when text is long it's going out of table:

enter image description here

here the code

<div class="modal-body" style="word-wrap: break-word;">
  <table id="foldersTable" class="table-hover" style=" border-collapse: collapse;   table-layout: fixed; ">
    <tbody>
      <tr style="  word-wrap: break-word;">
        <td style="word-break:  break-word;"><i style="margin-right: 8px;" class="fa fa-folder"></i>
          <h2>aa</h2>
        </td>
      </tr>
      <tr style="  word-wrap: break-word;">
        <td style="word-break:  break-word;"><i style="margin-right: 8px;" class="fa fa-folder"></i>
          <h2>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h2>
        </td>
      </tr>
      <tr style="  word-wrap: break-word;">
        <td style="word-break:  break-word;"><i style="margin-right: 8px;" class="fa fa-folder"></i>
          <h2>b</h2>
        </td>
      </tr>
      <tr style="  word-wrap: break-word;">
        <td style="word-break:  break-word;"><i style="margin-right: 8px;" class="fa fa-folder"></i>
          <h2>cc</h2>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Umutambyi Gad
  • 4,082
  • 3
  • 18
  • 39
spez
  • 409
  • 8
  • 21
  • Does this answer your question? https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table – Maestro Jul 23 '20 at 12:14

1 Answers1

1

For word-wrap to work you should provide some width to td element and when data is more than that width it will start applying word-wrap with break-word, also you don't need to use word-wrap attribute on each and every element just use it on td and still it will work fine.

Pritesh
  • 337
  • 1
  • 10