我有下表:
<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>
基本思想是第一行必须为7像素高。最左边和最右边的单元格(A1和C1)必须为7px宽,中间的单元格(B1)必须根据表格的宽度缩放。最下面一行(A3,B3,C3)也是如此。
但是,中间的行需要按比例缩放高度-换句话说,它需要是
(tableheight - 14px)
。最左边和最右边的像元(A2,C2)必须为7像素宽。一个例子:
7px x 7px
|------|-------------------------|------|
--- +------+-------------------------+------+
| | | | |
| 7px | | | |
| | | | |
--- +------+-------------------------+------+
| | | | |
| | | | |
| | | | |
| | | | |
| y | | | |
| | | | |
| | | | |
| | | | |
| | | | |
--- +------+-------------------------+------+
| | | | |
| 7px | | | |
| | | | |
--- +------+-------------------------+------+
但是,在Internet Explorer中,宽度可以很好地工作(列A和C为7px,列B动态缩放)-但高度却不能。无论我做什么,第1、2和3行都恰好是 table 高度的33%。不幸的是,我必须使用此表,所以用一组DIV替换它是不可行的。
我有以下DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我需要保留这一点,因为页面上的其他一些元素依赖于一些复杂的基于CSS的布局。
谁能为我指出正确的方向,以使其成为IE的雏形?
编辑:应该早先提到过-使用javascript即时调整此表的大小。
最佳答案
可以使用垫片而不是使用适当的高度(因为这会引起问题)。例如,将透明的小gif设置为您想要的高度。您将要这样做的gif:<img src="./gfx/spacer.gif" style="height:14px;" />