Damn CSS and HTML!
This is down right annoying!
I need to do something very specific, (and I am sure that I am not the only person who has ever wanted to do this) using XHTML and CSS (this also applies to HTML), it is also a very simple concept, but it appears absolutely impossible to achieve. Here’s the deal:
I have a table on a page – there is only a class name attribute on the table, it is formatted using <thead> <th> and <tbody> elements, and it has 2 columns. The table, using CSS, is set to consume 100% of the available width, and each column has a class name that is applied to all the cells in that column. I want first column to be a fixed width (but with a difference), and I would like the second column to pick up the slack space. The first column should be a fixed width column based on the width of the widest piece of data in that column – as the table resizes (e.g. with a change in Window size, or a different screen resolutions) this should not change size.
I am fully aware that I could specify this with a fixed pixel width but this does not solve a problem:
- Each browser renders differently (even now!).
- Each machine may substitute fonts for those that it has installed.
- I have different pieces of text in this column type depending on the web page viewed (and even the status of data on that screen), so I could never know the correct number of pixels.
I am also aware that I could specify a percentage, but again this does not solve the problem:
- At very thin resolutions, the cell size would be too small
- At very wide resolutions there could be acres of screen space used by absolutely nothing (which could be better served by not wrapping the possibly large contents in the adjacent cell).
I cannot see a way to do what I want to do, either using standards compliant technique (i.e. CSS and XHTML strict), or even by going off-piste and using techniques that would work in only the most popular browsers.
It seems to me now, that although in-roads have been made in recent years towards getting browsers to display content in a relatively similar manner (we are still a long way from that yet), it is the layout specification that is at fault. This is not the first run-in I have had with this sort of problem – back in May, I experienced something else that I could not do from CSS.
If anyone has any clues as to how to achieve this, then please share by posting it here!
Em
If you have 12 characters in the first column, try sizing it to be 12em wide.
You might need an extra one or two for spacing — Firefox is usually the broadest — but that’s it in principle.
Only Partial Solution
Rich, although that would be a great step in the right direction, it doesn’t exactly solve my problem – see third bullet point of first list. I’m not entirely sure how many characters will appear in each table, so to use this technique, I would have to work out the longest possible string (manually) and use that as the length.
It could be though that on one page I could have many short strings, but on one page only, I have a very long string – this would upset the balance of all the other pages (similar to second bullet, second list).
It’s certainly a step in the right direction, and I will probably use it, but it still involves hard coding (something I disapprove of), it doesn’t lay things out in the best way, and it means that any future changes may have to change the style sheet.