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>

Copy after login

Additional Considerations:

Note that the width of the table element should be specified explicitly to ensure that it is equal to or smaller than the fixed width cells.

The above is the detailed content of Why Doesn't `overflow: hidden` Work in a Table Cell and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!