|
Posted by Ben C on September 1, 2007, 4:34 pm
Please log in for more thread options
> Hello
>
> I have strange issue with tables. I like to have table with 3 columns
> where the middle column is fixed an the other 2 columns are relative,
> using the rest max width. Effect is that the middle area is centered.
> So far no issue, Example
>
><table width="100%" border="1" cellspacing="0" cellpadding="0">
> <tr>
> <td> </td>
> <td width="704">centered column</td>
> <td> </td>
> </tr>
></table>
>
> When I like to add some text in the first column " T E X T", the
> column width is "exploding" so that the centered column moves to right
> and the last column is shrinked nearly to nothing.
>
><table width="100%" border="1" cellspacing="0" cellpadding="0">
> <tr>
> <td> T E X T </td>
> <td width="704">centered column</td>
> <td> </td>
> </tr>
></table>
>
> I noticed this issue in IE 6.0 and also in FireFox 2. Can anyone
> explain what here is happing and why the first and last column are not
> longer sharing the rest of the space so that the middle column appears
> centered?
You asked for the middle cell to be 704px wide, and for the whole table
to be 100% wide. Suppose the available space is 1250px (this depends on
the size the user makes her window). That means the total width of cells
1 and 3 must be 546px.
How much of that should go in cell 1 and how much in cell 3? It's not
defined precisely by the specification. Browsers don't have to
distribute the 546px evenly between the two cells (the thing you want).
In fact what they are quite likely doing is distributing more of the
extra width to cell 1 because its preferred width (the width of the text
in it with no line breaks) is greater. Generally that strategy is
preferable for a real table containing tabular data since it tends to
keep cell widths closer to the widths of their contents.
> Any idea to reach such a design that I can position the " T E X T"
> right aligned to the centered column so that when the size of the
> browser changes it stills aligned centered?
I'm not sure I understand what you're asking for. You want the 704px
thing centered in the viewport, with "T E X T" hanging off to the left
of it?
><table width="100%" border="1" cellspacing="0" cellpadding="0">
> <tr>
> <td align="right"> T E X T </td>
> <td width="704">centered column</td>
> <td> </td>
> </tr>
></table>
If you add width="10%" to the first and third cells you get what (I
think) you want in some browsers at widths at least > 800px.
But I don't recommend this as it's really very dodgy. We're asking for a
set of things that can't all be satisfied except at one precise viewport
width: for the table to be 100% of the viewport, its middle cell to be
704px and the cells either side of it to be 10% of the total table
width.
We're relying on the browser interpreting this as: of all the things
you've asked for, the 704px width for the middle cell is the most
important; but since the cells either side both want to be 10%, at least
make them the same widths as each other. This is skating on thin ice.
You need to provide more context and explain what this is for because
there is probably a much simpler way perhaps with a small compromise of
your design. If for example "T E X T" is actually an image, or something
with a known or styled width, then there are a lot more options.
| 
XML Sitemap