I have
the following table:
<table>
<tr>
<td style="height: 7px; width: 7px"> A1 </td>
<td style="height: 7px"> B1 </td>
<td style="height: 7px; width: 7px"> C1 </td>
</tr>
<tr>
<td style="width: 7px"> A2 </td>
<td> B2 </td>
<td style="width: 7px"> C2 </td>
</tr>
<tr>
<td style="height: 7px; width: 7px"> A3 </td>
<td style="height: 7px"> B3 </td>
<td style="height: 7px; width: 7px"> C3 </td>
</tr>
</table>
The basic idea is that
the first row must be 7 pixels high.
The left- and rightmost cells (A1 and C1) must be 7px wide, and
the middle cell (B1) must scale according to
the width of
the table.
The same goes for
the bottom row (A3, B3, C3).
The middle row, however, needs to scale
in height -
in other words, it needs to be (tableheight - 14px).
The left- and rightmost cells (A2, C2) need to be 7 pixels wide.
An example:
7px x 7px
|------|-------------------------|------|
--- +------+-------------------------+------+
| | | | |
| 7px | | | |
| | | | |
--- +------+-------------------------+------+
| | | | |
| | | | |
| | | | |
| | | | |
| y | | | |
| | | | |
| | | | |
| | | | |
| | | | |
--- +------+-------------------------+------+
| | | | |
| 7px | | | |
| | | | |
--- +------+-------------------------+------+
HOWEVER:
In Internet Explorer,
the widths work fine (columns A and C are 7px, column B scales dynamically) - but
the heights don't. Rows 1, 2 and 3 turn out to be exactly 33% of
the height of
the table, no matter what I do. Unfortunately I have to use this table, so replacing it with a set of DIVs is not an option.
I have
the following DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I need to keep this, as some other elements on
the page rely on some complex CSS-based layouts.
Can anyone point me
in the right direction to whip this into shape for IE?
EDIT: Should have mentioned earlier - this table is resized on
the fly using javascript.
