Home > Uncategorised > Damn CSS and HTML!

Damn CSS and HTML!

September 28th, 2005 Leave a comment Go to comments

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!

Categories: Uncategorised Tags: , ,
  1. Rich
    September 28th, 2005 at 22:37 | #1

    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.

  2. Armswiper
    September 29th, 2005 at 08:15 | #2

    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.

  1. No trackbacks yet.