Email conversation
| From | Lugojan Alexandru Gheorghe |
|---|
| To | Me |
|---|
| Subject | problems with Table Width |
|---|
| Date | 20 March 2007 12:00 |
|---|
| Attachment | Screenshot of IE 7 showing how the alfa beta and gamma cells in the second table are all using about 33% of the available width |
|---|
I have a problem with a table:
Table 1:
<table border="1"
width="100%"
align="center">
<tr>
<td colspan="3"
align="center">
123456789 123456789 123456789 1
</td>
</tr>
<tr>
<td align="center"
width="100">
alfa
</td>
<td align="center">
beta
</td>
<td align="center"
width="100">
gamma
</td>
</tr>
</table>
Table 2:
<table border="1"
width="100%"
align="center">
<tr>
<td colspan="3"
align="center">
123456789 123456789 123456789 12
</td>
</tr>
<tr>
<td align="center"
width="100">
alfa
</td>
<td align="center">
beta
</td>
<td align="center"
width="100">
gamma
</td>
</tr>
</table>
The only difference between the two tables is the numerical string in the
first row: 31, and 32 characters!
I have a screen capture.
Can you help me?
Sorry for my english.
Best regards,
Lugojan Alexandru
| From | Me |
|---|
| To | Lugojan Alexandru Gheorghe |
|---|
| Subject | Re: problems with Table Width |
|---|
| Date | 20 March 2007 18:32 |
|---|
Lugojan,
> Can you help me?
This is a very interesting problem. Basically, if the width of the cell that
spans all columns is more than the combined widths of all cells in those
columns that have the width attribute specified, then all width attributes
are ignored.
In your case, this means that alfa and gamma are 100 pixels wide each, and
beta is not restricted. If the contents of the cell in the first row is
greater than 100+100->200 pixels, then it fails.
What surprised me was that Opera seems to have this behaviour as well, so it
is not just an IE behaviour.
Anyway, the fix is to tell the browser not to use its automatic table
layout, and to force it to respect your layout. Note that doing this means
that the usual table stretch-to-fit behaviour will not happen, so use it
with caution. You can tell it to respect your widths by setting the
following style:
table { table-layout: fixed; }
Note however that the fixed table layout expects the first row in the table
to have all of the size information, which is not the case with your table,
as the first row uses colspan. So you will need to use the COL element at
the start of the table to tell it what widths to use:
<table border="1" width="100%" style="table-layout:fixed;">
<col width="100"><col><col width="100">
<tr><td colspan="3">123456789 123456789 123456789 12</td></tr>
<tr><td>alpha</td><td>beta</td><td>gamma</td></tr>
</table>
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Lugojan Alexandru Gheorghe |
|---|
| To | Me |
|---|
| Subject | Re: problems with Table Width |
|---|
| Date | 21 March 2007 08:43 |
|---|
Thank you very much.
I am really happy that you find my problem ,,very interesting''.
It works with [col] with and without [table-layout].
And with [table-layout] without [col], just with [width] in [td].
| From | Me |
|---|
| To | Lugojan Alexandru Gheorghe |
|---|
| Subject | Re: problems with Table Width |
|---|
| Date | 21 March 2007 09:22 |
|---|
Lugojan,
> It works with [col] with and without [table-layout].
In IE yes. Sadly not in Opera though (and I always prefer an approach that
works in as many browsers as possible). You will need both to make it work
in Opera (if the first row does not have width attributes).
> And with [table-layout] without [col], just with [width] in [td].
Yes, but only if the first row has the width attributes on the cells. If the
first row has colspan, you will need the COL elements. This was the case
with the samples you sent me, where just applying fixed layout did not fix
the problem in either IE or Opera.
Tarquin