# Why does content overflow my HTML table cell even with a fixed width?
Source: https://coursesweb.net/forum/t/why-does-content-overflow-my-html-table-cell-even-with-a-fixed-width/
Site: CoursesWeb Forum, category HTML Structure and Semantics
Published: 2026-11-11. Updated: 2026-11-11. Replies: 0.
## Question by Teodora Vance (staff), 2026-11-11
By default a table sizes its columns to fit their content, so a width on a cell is only a hint. A long word or web address can push the column wider or spill out of it. Set table-layout to fixed, give the table a width, and tell long text where it may break.
## A minimal working example
Here is a table with one long address that has no spaces in it, the usual cause of this problem:
```html
```
```css
.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](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap) 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](/forum/t/how-do-i-put-two-divs-side-by-side-inside-a-container/).
---
Cite as: CoursesWeb Forum, "Why does content overflow my HTML table cell even with a fixed width?", https://coursesweb.net/forum/t/why-does-content-overflow-my-html-table-cell-even-with-a-fixed-width/, accessed 2026-11-11.