How to Make Table Cells Wrap Content in HTML?

Addressing Table Cell Wrapping Issue

In HTML, table cells () usually do not wrap their content by default. To force them to wrap, we need to modify the CSS styles.

Solution:

To ensure that table cell content wraps, add the following styles:

• CSS for table: Set table-layout: fixed; on the table element to define column widths and prevent content from stretching.
• CSS for table cells: Apply word-wrap: break-word; to break long words within cells.

Code Example:

<code class="css">table {
  border-collapse: collapse;
  table-layout: fixed;
  width: <table_width>;
}

table td {
  border: 1px solid #ccc;
  width: <td_width>;
  word-wrap: break-word;
}</code>

Example HTML:

<code class="html"><table>
  <tr>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
    <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</td>
  </tr>
</table></code>

By applying these CSS rules, the table cells will wrap their content and avoid stretching. Additionally, setting the table and cell widths ensures that the content fits within the defined dimensions.

The above is the detailed content of How to Make Table Cells Wrap Content in HTML?. For more information, please follow other related articles on the PHP Chinese website!