Table Columns and Percentage Widths
Published: 22 Jun 2013
Another member of my web designer team at work came across an interesting issue dealing with data tables. The first column of the table had very short (one- to two-characters long) data needed to be restricted so that the others could expand for larger chunks of data.
Initially, the width being assigned to
col-one came from a copied template and had a small percentage value to keep it flexible if need be, but still quite small of a column.
However, this width was causing the table to appear to be expanding the entire width of it’s parent, instead of just accommodating the length of the data inside the table. At first I thought it was strange that just applying any percentage width to only one column would cause a table to expand 100%. But when I dug a little deeper and did some basic testing on CodePen, I learned what was really going on.
Instead of repeat everything in this post, I’ll just embed the pen below. Hope it’s useful information for someone! I know I enjoyed learning it!
comments powered by Disqus