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

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

<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 2

如果您尝试建立一个带桌子的网站，那么欢迎来到21世纪。表布局非常过时。试试像http://www.pmob.co.uk/temp/3colfixedtest_4.htm这样的网站。在那里，您可以找到Web标准布局。

Answer 3

如上所述，尽管它不是您问题的真正答案，但您要做的最佳方式是学习如何使用<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 4

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

table {
   width: 600px;
}

table td {
   padding: 5px;
}

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

Answer 5

感谢回复人员。在过去的几个小时里，我尝试用div构建这个，但是我无处可去。我有很多rowpans和colspans，我不能把它们放在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，但我不认为我会把它弄成^^'' 这似乎是一个简单的问题，但我看不到一个简单的解决方案......

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

5 个答案: