Why does content overflow my HTML table cell even with a fixed width?

A minimal working example

Here is a table with one long address that has no spaces in it, the usual cause of this problem:

<table class="data">
  <thead>
    <tr><th>File</th><th>Source</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>report.pdf</td>
      <td>https://example.com/a-very-long-address-with-no-spaces/that-keeps-going-and-going</td>
    </tr>
  </tbody>
</table>

.data {
  table-layout: fixed;
  width: 100%;
  max-width: 600px;
  border-collapse: collapse;
}

.data th:first-child {
  width: 8rem;
}

.data th,
.data td {
  border: 1px solid #c5c6ce;
  padding: 0.5rem;
  overflow-wrap: anywhere;
}

The first column is 8rem wide. The second column gets the rest of the 600px, and the long address wraps inside it instead of pushing the table wider.

Why this works

A table has two ways to calculate column widths, chosen by the table-layout property. MDN's table-layout page describes them:

Value	What the browser does
auto (the default)	Adjusts the table and cell widths to fit the content
fixed	Uses the table's width and the widths you set, and ignores the content

MDN also says that with fixed, the table width needs to be specified explicitly, or the browser quietly falls back to the automatic algorithm. And for the fixed algorithm, a column gets its width from a col element, or otherwise from a cell in the first row that has an explicit width, or otherwise from the shared remaining space. That is why the example sets the width on the header cell in the first row.

Fixed layout has a side effect. MDN notes that later cell content might not fit in the column widths provided. So a long unbroken string can now spill out of its cell instead of widening the column. That is where overflow-wrap comes in. MDN's overflow-wrap page explains that it sets whether the browser may insert line breaks inside an otherwise unbreakable string, such as a long word or a URL.

Which value should you pick? Both anywhere and break-word allow a break at any point when a word does not fit. The difference is that anywhere also counts those break points when the browser works out the minimum width of a cell. In a table that is still on the automatic layout, anywhere is the one that lets the cell shrink. With table-layout: fixed, either one works.

Mistakes beginners make

1. Setting width only on the td. With the default automatic layout, the browser treats it as a suggestion. When the content cannot fit, the column grows. MDN says that with auto, the table would grow to accommodate its contents, despite the specified width.
2. Using word-break: break-all on everything. It splits ordinary words in the middle. overflow-wrap only breaks a word when that word cannot fit on its own line, so normal text still wraps at spaces.
3. Leaving white-space: nowrap or a pre element in the cell. These tell the browser never to wrap, so no amount of width helps. Remove them or give that one cell its own rule.

If you would rather cut long text short than wrap it, MDN's example uses a fixed layout with overflow: hidden, white-space: nowrap and text-overflow: ellipsis on the cells. The cell then shows an ellipsis (three dots) where the text is cut off.

Check this in order

1. Does the table itself have a width, in CSS or a width attribute? Without one, fixed layout has no effect.
2. Is table-layout: fixed applied to the table element? Look at the Computed tab in DevTools.
3. Is the width set on a first-row cell or a col?
4. Is there a long string with no spaces in the cell? Add overflow-wrap: anywhere.
5. Is there nowrap or a pre element or an image wider than the column? For images, add max-width: 100%.
6. On a phone, does the whole table still not fit? Put it inside a div with overflow-x: auto so it scrolls sideways.

Tables are for tabular data. If you were using one to put page content in columns, flexbox is easier: see how to put two divs side by side.