3

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 (e.g., 100px), but rather let the browser calculate it. How can I accomplish this in HTML/XHTML/CSS/js?

Jayen
  • 5,653
  • 2
  • 44
  • 65
  • I can almost guarantee what the browser would do (if it could do what you're asking) will *not* be what you want it to look like. Why can't you do fixed width? – sachleen Aug 03 '12 at 00:24
  • If I do it all in one table, it looks like what I want it to look like, so now I just want to split it into separate tables. – Jayen Aug 03 '12 at 04:08
  • Can I ask why you want to avoid fixed widths? Is it to allow for unknown widths, letting the browser calc for you? – Matthew Cox Aug 03 '12 at 04:15
  • Yes, mostly. I personally hate fixed-width pages. They are always too small or too big for the size I want to run my browser at. As a user, I know what size I want my browser to be and I hate that web sites think they know better. As a result, I refrain from making web pages that are fixed-width. – Jayen Aug 03 '12 at 04:55

1 Answers1

0

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

railser
  • 453
  • 1
  • 5
  • 19
  • What do you mean "the layout will vary"? Setting the width based on percentage of the page width is ok, but I can't accommodate for word-wrapping like the browser can. – Jayen Aug 03 '12 at 04:14
  • I meant that the objects in a given section/column of the page might not line up properly depending on the browser window size and/or client's resolution. Alternatively you could set a fixed width for each element along with `margin: 0 auto;` to let the browser automatically calculate just the margin. This is common practice for a wrapper. [See this post](http://stackoverflow.com/questions/5275410/correct-way-to-do-a-css-wrapper) – railser Aug 03 '12 at 13:58
  • What happens if the sum of the widths is more than the browser window? or if the width is smaller than the element using the browser's default font size? I guess I'll try it and see. – Jayen Aug 03 '12 at 22:40
  • Sometimes compromises have to be made. There are standard practices that function properly in the vast majority of cases (you can't always satisfy everyone) such as the [960 grid system](http://960.gs/) and [Twitter's Bootstrap](http://twitter.github.com/bootstrap/) – railser Aug 04 '12 at 01:01
  • Bootstrap looks pretty cool. I might use that for future projects. – Jayen Aug 04 '12 at 08:41