How to force table cell content to wrap?

by

Use table-layout:fixed in the table and word-wrap:break-word in the td.

See this example:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>

More Related Contents:

  1. How to design a table like this
  2. How do I keep two side-by-side div elements the same height?
  3. How do I create an HTML table with a fixed/frozen left column and a scrollable body?
  4. Table fixed header and scrollable body
  5. Alternate table row color using CSS?
  6. Table with fixed header and fixed column on pure css
  7. How to display scroll bar onto a html table
  8. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  9. Fixed Table Cell Width
  10. Add border-bottom to table row
  11. How to make fill height
  12. How to remove unwanted space between rows and columns in table?
  13. How to make Scrollable Table with fixed headers using CSS [duplicate]
  14. CSS table-cell equal width
  15. How can I truncate table cells, but fit as much as content possible?
  16. Setting table column width
  17. Table scroll with HTML and CSS [duplicate]
  18. How to center the contents of an HTML table?
  19. How to hide Table Row Overflow?
  20. Min-width and max-height for table attributes
  21. Linethrough/strikethrough a whole HTML table row
  22. Why is box-sizing acting different on table vs div?
  23. Table overflowing outside of div
  24. Border around tr element doesn’t show?
  25. How to completely remove borders from HTML table
  26. Removing unwanted table cell borders with CSS
  27. with fixed and scrollable [duplicate]
  28. Yet Another Divs vs Tables issue: Forms
  29. Splitting a table cell into two columns in HTML
  30. Table vertical header?

Leave a Comment