Keith Wyland

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.

<table>
	<tr>
		<td class="col-one">xx</td>
		<td>Longer string of data</td>
		<td>Even longer string of dynamic data</td>
	</tr>
</table>

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.

.col-one { width: 5%; }

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!

See the Pen Test Case: table column % widths by Keith Wyland (@keithwyland) on CodePen


« iOS Viewport Orientation and initial-scale « Older | Newer »  »


comments powered by Disqus