Posted November 27, 2018
Filed Under: blog
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
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.
fixedto have any effect, the table’s
widthhas to be set to something other than
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.
In addition to being quick, this solution is also responsive. Go ahead, change the viewport size in the embedded pen above.
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 post.
CSS-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.