On the following page (the lower half) I want to lay out parallel texts (Rutter's Requiem in Latin and Japanese) in two columns:

http://imaginatorium.org/ecco/rutter.htm

I have used a table with the TD CSS_width set to 48%, in the hope that that will make the width of each column about 50% of the total width available. For most of the tables this is indeed what appears to happen, and five of the seven are lined up perfectly. But the first and fourth are a lot and a little narrower, perhaps because there are no lines of text wide enough to fill the 50%.

Here's the CSS for the table:

TABLE.kashi {
margin: 0.5em;
border: solid thin #002050;
padding: none;
border-collapse: collapse;
}

TABLE.kashi TD {
margin: 0;
padding: 0.6em;
width: 48%;
border: solid thin #205000;
vertical-align: top;
}

First, is my problem actually a Feature? (In which case are there any neat kludges for defeating this?)

Or is there either an error in what I have done, or a simple way of making a table be the whole of the available width?

(Unrelated question: How many people are there likely to be for whom accessing a page in Japanese causes "browser panic": invitations to download "Language packs" and suchlike? Or are those things all in the past now? I am contemplating major redesign of my shop pages, and eliminating the previous segregation between Japanese and non-Japanese pages would be helpful.)

The third is also less large in Safari. Besides, the second doesn't seem to have much content on the right either, but that one is as wide as the others.

If you set a width to TABLE.kashi of say 98%, then they all are as wide as the other five (or four) already were.

As to your unrelated question, I think most people will just go elsewhere if they don't understand the language or search for an english version of the site, if provided. Though, I must admit that I see a lot of computer illiterates lately, who haven't the fainest idea what happens on a computer or how to handle with it.

Thanks for your reply...



OK, I had failed to understand why setting a <td> CSS_width of 48% means "Make the TD CSS_width 48% of the containing block or some other if inconvenient", whereas the <table> CSS_width actually means "Make the CSS_width whatever". I suppose it's because the TD setting is relative to the TR setting, which is relative to the TABLE setting, which I hadn't explicitly set.

If the <TABLE> has zero margin/padding/border, perhaps I should set its CSS_width to 100%? Do I need to set the CSS_width of <TR> similarly, or does something special happen there too?

Actually, <table> does have a margin; I suppose I can change it to 1%, and then know that 1%x2 + 98% = 1.

I did some more reading, and I discovered something called table-layout: fixed, which seems to make it more likely that the table width is what is intended. How do I find out how well supported it is?

** ** **

I didn't phrase my unrelated question well. I'll ask again somewhere else.

You probably already read the articles at W3C:
http://www.w3.org/TR/CSS21/visudet.html#propdef-width
http://www.w3.org/TR/CSS21/tables.html#width-layout

For a browser compaibility chart for table-layout, see:
http://www.westciv.com/style_master/academ...ement_type.html
http://www.quirksmode.org/css/tables.html
http://reference.sitepoint.com/css/table-layout

And you might find something on margins and table widths at http://www.d.umn.edu/itss/support/Training...design/css.html (search for table in the Page Index and/or the page itself).