same [not-fixed] width of same column in multiple tables in HTML

Question

I have several tables on the same page, each with the same number of columns. I want the first column in all the tables to have the same width, likewise for the second, etc. I do not want to specify a fixed width (eg, 100px), but rather let the browser calculate it. How can I accomplish this in HTML/XHTML/CSS/js?

Answer 1

You could just specify the width to be a % of the total page width in the CSS. Assign the same class to the first column in all the tables and set width: 15%; This isn't ideal however as the layout will vary based on a client's resolution. You're better off using a fixed width with position: fixed;

see CSS class position