How to wrap the content of a table cell <td> using CSS

# Table of Contents

# How to wrap the content of a table cell `<td>` using CSS

To wrap the content of a table cell <td> using CSS:

Set the table-layout CSS property to fixed on the table element.
Set the word-wrap CSS property to break-word on each td element.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      table {
        table-layout: fixed;
        width: 400px;
        border-collapse: collapse;
      }

      table td {
        word-wrap: break-word;
        border: 1px solid black;
      }

      table th {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <br />
    <br />

    <table id="example-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger</td>
          <td>
            Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Beatae animi dolor a, tenetur molestias,
            perferendis, amet tempora blanditiis!
          </td>
        </tr>
        <tr>
          <td>Jenette</td>
          <td>Development Lead</td>
        </tr>
        <tr>
          <td>Yuri</td>
          <td>CMO</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

wrap content of table cells using css

The code for this article is available on GitHub

When the table-layout CSS property is set to fixed, the table and column widths are set by the width of the first row of cells.

Cells in subsequent rows don't affect column widths.

index.css

Copied!
table {
  table-layout: fixed;
  width: 400px;
  border-collapse: collapse;
}

You can also set the width of the table to 100% if you want it to take up the width of the parent element.

index.css

Copied!
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

The last step is to set the word-wrap CSS property to break-word on the td elements.

index.css

Copied!
table td {
  word-wrap: break-word;
  border: 1px solid black;
}

When the word-wrap CSS property is set to break-word, then unbreakable words are allowed to be broken at arbitrary points if there are no acceptable break points in the line.

Here is an example that better illustrates how this works by using unbreakable words in a table cell.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      table {
        table-layout: fixed;
        width: 400px;
        border-collapse: collapse;
      }

      table td {
        word-wrap: break-word;
        border: 1px solid black;
      }

      table th {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <br />
    <br />

    <table id="example-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger</td>
          <td>
            bobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.com
          </td>
        </tr>
        <tr>
          <td>Jenette</td>
          <td>Development Lead</td>
        </tr>
        <tr>
          <td>Yuri</td>
          <td>CMO</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

wrap content of table cell with unbreakable words

The code for this article is available on GitHub

The text in the table cell is wrapped even though the words are unbreakable (no spaces).

You can also set the overflow-wrap property to break-word.

index.css

Copied!
table td {
  /* 👇️ for older browsers */
  word-wrap: break-word;
  overflow-wrap: break-word;
  border: 1px solid black;
}

When the overflow-wrap property is set to break-word, normally unbreakable words are allowed to be broken at arbitrary points if there are no acceptable break points in the line.

The overflow-wrap property differs from word-wrap in that it only creates a break if an entire word cannot be placed on its own line without overflowing.

# Wrap the content of a table cell `<td>` using `break-all`

You can also set the word-break CSS property to break-all to wrap the content of table cells using CSS.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }

      table {
        table-layout: fixed;
        width: 400px;
        border-collapse: collapse;
      }

      table td {
        word-break: break-all;
        border: 1px solid black;
      }

      table th {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <br />
    <br />

    <table id="example-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger</td>
          <td>
            bobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadz
          </td>
        </tr>
        <tr>
          <td>Jenette</td>
          <td>Development Lead</td>
        </tr>
        <tr>
          <td>Yuri</td>
          <td>CMO</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

using word break break all to wrap content of table cells

The code for this article is available on GitHub

This time, we set the word-break CSS property to break-all.

index.css

Copied!
table td {
  word-break: break-all;
  border: 1px solid black;
}

When the property is set to break-all, word breaks are inserted between any two characters.

# Make sure `white-space` is not set to `nowrap`

If you aren't able to wrap the content of table cells, make sure that your td elements aren't inheriting a white-space CSS property that's set to nowrap.

When the value of white-space is set to nowrap, then whitespace is collapsed as normal, however, line breaks are suppressed.

Here is an example that demonstrates this issue.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }

      table {
        table-layout: fixed;
        width: 400px;
        border-collapse: collapse;
      }

      table td {
        white-space: nowrap;
        word-break: break-all;
        border: 1px solid black;
      }

      table th {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <br />
    <br />

    <table id="example-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger</td>
          <td>
            bobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadz
          </td>
        </tr>
        <tr>
          <td>Jenette</td>
          <td>Development Lead</td>
        </tr>
        <tr>
          <td>Yuri</td>
          <td>CMO</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

make sure white space is not set to nowrap

The code for this article is available on GitHub

Notice that the td elements have their white-space property set to nowrap.

index.css

Copied!
table td {
  white-space: nowrap;
  word-break: break-all;
  border: 1px solid black;
}

This prevents the content in the table cells from wrapping.

Instead, set the white-space property to normal.

index.css

Copied!
table td {
  white-space: normal;
  word-break: break-all;
  border: 1px solid black;
}

You might also have to use the !important flag if you need to override an existing style.

index.css

Copied!
table td {
  white-space: normal !important;
  word-break: break-all;
  border: 1px solid black;
}

After setting white-space to normal, the issue is resolved.

setting white space to normal

The white-space property also has a pre-wrap value where sequences of white space are preserved and lines are broken at newline characters, at <br> and as necessary to fill line boxes.

index.css

Copied!
table td {
  white-space: pre-wrap !important;
  word-break: break-all;
  border: 1px solid black;
}

using white space pre wrap value

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to wrap the content of a table cell <td> using CSS

# Table of Contents