固定单元格高度并在表格中定义一个灵活的高度

Question

我的网站布局有这个问题，它基本上阻止我继续它，它正在破坏一切。

HTML 代码如下：

    <table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
        <td valign="top" colspan="2" height="110">
        <p align="center">Banner</td>
    </tr>
    <tr>
        <td valign="top" height="95">I want this cell to have a fixed height</td>
        <td valign="top" rowspan="3" width="305">
        <p align="center">Text goes here - if the text is too long, I want the 
        stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
        <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
        <td height="89" width="141" valign="top">Stretching/Flexible cell - I 
        want this one to vary in height if the text on the right cell is too 
        long</td>
    </tr>
</table>

如您所见，如果我编写的文本大于“文本单元格”高度，则右列中的所有单元格都会拉伸，而我只希望最后一个单元格这样做。你能帮帮我吗？

Answer 1

如果您尝试制作一个带有表格的网站，那么欢迎来到 21 世纪。表布局非常过时。试试http://www.pmob.co.uk/temp/3colfixedtest_4.htm 之类的网站。在那里您可以找到网络标准布局。

Answer 2

将左下角单元格的高度设为“*”，如下所示：

<table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
        <td valign="top" colspan="2" height="110">
        <p align="center">Banner</td>
    </tr>
    <tr>
        <td valign="top" height="95">I want this cell to have a fixed height</td>
        <td valign="top" rowspan="3" width="305">
        <p align="center">Text goes here - if the text is too long, I want the 
        stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
        <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
        <td height="*" width="141" valign="top">Stretching/Flexible cell - I 
        want this one to vary in height if the text on the right cell is too 
        long</td>
    </tr>
</table>

这不会让您定义单元格的最小高度，但它可以工作。最好的当然是使用 css。

实际上，当我想到这一点时，您可以将右列的高度设置为“257”（您的左高度之和，这意味着如果右列不拉伸，您的 * 将默认为 89 .

我确信这不是跨浏览器兼容的，但是...是的，刚刚从 IE6 中删除，它的行为并不像人们期望的那样。不过，Firefox 效果很好。

这可能意味着 css 是你最好的选择。

Answer 3

我至少会尝试学习一些 CSS 并使用它来设置表格的样式和大小，而不是使用 HTML。那里有很多很好的教程，但例如：

table {
   width: 600px;
}

table td {
   padding: 5px;
}

将使您的表格宽 600 像素，并为每个 <td> 5 像素填充。分配任何单元格或行ids（唯一）和classes（应用于组）以获得更精确的控制。

Answer 4

如上所述，虽然这不是您问题的真正答案，但最好的方法是学习如何使用<DIV> 标签创建 CSS 布局。这将使您能够更好地控制页面布局，虽然需要预先学习，但在以后使用表格时会为您省去很多麻烦。

实际上，再次查看您的示例。这里的基于布局会非常简单。

<div id='container'>
   <div class='banner'>Banner</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>   
</div>

这将为您提供与带有一些 CSS 样式的表格相同的布局。

编辑：关于此事的最后一句话。就我个人而言，如果我知道某个区域将是一个网格类型的区域，并且对不同区域没有特殊的格式化需求，<table> 就可以了，否则我将始终使用基于 CSS 的布局。

Answer 5

感谢大家的回复。在过去的几个小时里，我尝试用 div 构建它，但我无处可去。我有很多行跨度和列跨度，我不能把它们放在 CSS 中。 实际上，设计比我在这里发布的简单表格要复杂得多：

<table cellpadding="0" cellspacing="0" width="750" height="871">
        <!-- MSTableType="layout" -->
        <tr>
            <td valign="top">
            <p style="margin-top: 0; margin-bottom: 0">Banner</td>
            <td valign="top" rowspan="3">
            <p style="margin-top: 0; margin-bottom: 0">Banner</td>
            <td valign="top" rowspan="3" colspan="2">
            <p style="margin-top: 0; margin-bottom: 0">Banner</td>
            <td height="154"></td>
            </tr>
        <tr>
            <td valign="top">Banner</td>
            <td height="24"></td>
            </tr>
        <tr>
            <td valign="top" rowspan="3">Fixed Menu Cell</td>
            <td height="122"></td>
            </tr>
        <tr>
            <td valign="top" colspan="3">
            Banner</td>
            <td height="29"></td>
            </tr>
        <tr>
            <td valign="top" rowspan="6" colspan="2"><p>&nbsp;</p>
            <p>CONTAINER AREA, Text goes Here</p>
            </td>
            <td valign="top" rowspan="6">
            &nbsp;</td>
            <td height="102"></td>
            </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="37"></td>
        </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="44"></td>
        </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="178"></td>
        </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="109"></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF">Flexible Cell - can vary depending on the 
            Container Area</td>
            <td height="33"></td>
        </tr>
        <tr>
            <td valign="top" colspan="4">
            <p align="center">Bottom</td>
            <td height="38"></td>
        </tr>
        <tr>
            <td width="252"></td>
            <td width="410"></td>
            <td width="56"></td>
            <td width="30"></td>
            <td height="1" width="2"></td>
        </tr>
    </table>

我正在尝试将这个混乱转换为 DIV，但我不认为我会成功 ^^'' 看似简单的问题，却看不到简单的解决办法……