Why Doesn't `overflow: hidden` Work in a Table Cell and How Can I Fix It?

Why Overflow Does Not Work in a Table Cell

In attempting to restrict the width of a table cell, the overflow: hidden property often fails to prevent the table from expanding with unspaced text strings. This issue can be resolved by implementing a combination of CSS properties on the table and table cell elements.

Solution:

To have the text cut off at the edge of the table cell, rather than have the cell expand, apply the following properties:

• Table Element:

  • table-layout: fixed

• Table Cell Element:

  • overflow: hidden
  • white-space: nowrap

Example:

Below is an updated example that demonstrates the correct usage of these properties:

  box-sizing: border-box;<br>}<br>table {<br>  table-layout: fixed;<br>  border-collapse: collapse;<br>  width: 200px;<br>}<br>td {<br>  background: #F00;<br>  padding: 20px;<br>  overflow: hidden;<br>  white-space: nowrap;<br>  border: solid 1px #000;<br>  width: 100%;<br>}

  <tbody></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>