Text Overflow in Tables Using table-layout

November 27, 2018
CSS and SASS Frontend HTML

The table-layout property was the key to getting the text to truncate properly. This property determines the algorithm to be used to layout table rows, cells, and columns. The relevant values are autofixed, or inherit
auto is the default value. The result will typically be determined by the content.
fixed will ignore the content and use the table’s width, specified column width, and border & cell spacing values to determine the layout. Column values used are based on widths defined on columns or cells in the first row of the table.
inherit indicates the value is the same from the table-layout value of the selected element’s parent.

For fixed to have any effect, the table’s width has to be set to something other than auto.


In practice, the table-layout property set to fixed could be used for aesthetic, like ensuring even column width regardless of content. Using fixed is also faster because the browser doesn’t have to analyze content prior to rendering the table layout.
With that in mind, we can apply other properties to accomplish text truncating in table cells. We can combine the above knowledge with typical text-overflow properties, and, as a result, we can get the text to truncate quite nicely.

See the Pen Handling Text Overflow in Table Cells by Nate Northway (@the_Northway) on CodePen.

Side Benefits

In addition to being quick, this solution is also responsive. Go ahead, change the viewport size in the embedded pen above.

Other Resources

Because you’re probably using dynamic text, you might have to deal with no text at all, as opposed to too much text. To handle that as equally gracefully, combining the table-layout property with the empty-cells property would be a great call. I talk about the empty-cells property briefly in this postCSS-Tricks has a great article showing the differences in table-layout properties. The MDN article exists, but I think it’s a little lacking and doesn’t do as good a job as the CSS-Tricks article.

No Comments...yet

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

Happy Fibonacci Day!

From November 24, 2018

Alright, maybe I’m a day late, I’m sorry. Calculating the Fibonacci Sequence is a fun exercise, with or without recursion.

Read This Article
Next Post

Parallax with vanilla JS (and more!)

From November 30, 2018

This short demo contains two simple things: darkening background images using pure CSS and a simple, easy to understand, vanilla JavaScript parallax.

Read This Article