表布局的是错误的，在即(7)

StackOverflow https://stackoverflow.com/questions/197266

题

下面是代码的简单html表的布局。在FF它看起来，因为我认为它看起来应该像， 在IE7它不。我做错了什么？

和我如何能解决这个问题？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <TITLE>test</TITLE>
    </head>
    <body>
        <table  id="MainTable" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td colspan="4">
                    <div style='width:769; height:192;'>192
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" valign="top">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td valign="top" >
                    <div style='width:190; height:100;'>100
                    </div>
                </td>                           
            </tr>
            <tr>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>
有帮助吗？

解决方案

我想你所抱怨的中间行（一个只含有rowspanned细胞），和在相邻的行，以补偿经扩大高度的最小高度，的div之间留下空隙。

当行只包含rowspanned细胞

IE不能计算最佳行高度。通常的解决方案时，你绝对不能rejig它摆脱行跨度的是1px的“虚拟”列添加到表的一侧，包含空单元格，每个设置行应该有多高的“高度”。

但是，是的，这取决于你打算用这个做什么，一个CSS布局可能是更合适的。如果这真是一个固定的像素换家居布局像这样的例子，对于每一个DIV绝对定位将是很多，轻松了许多。

其他位：CSS宽度/高度值需要单元（大概 'PX'）; VALIGN / CELLSPACING /等。可即使您使用表格布局样式表更容易进行;一个标准的模式DOCTYPE可能阻止一些越差IE错误的（尽管，不这个老的，非CSS相关的一个）。

其他提示

有关的开始，你的CSS值应该有单元，例如width:190;应width: 190px;

完全同意，你可以看看蓝图CSS或其它CSS框架一些帮助。

乍一看，它看起来像IE7有一些破碎的支持这样的格式。首先，我要建议，以摆脱div和移动的格式(宽和高度)直接在TD,但是我试过，似乎并不解决问题。

我猜这不是一个很好的解决方案，但它将能够更换行细胞的多个细胞的一种无形的边界之间，他们吗？但是这个解决方案如果失败的文本是更大的尺寸上的细胞。

文档类型的选择（4.01过渡没有系统标识符（URL））触发IE怪癖模式这使得它与其他浏览器高度不一致。

切换到：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

或者至少：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

（并且，当然，验证但是HTML和CSS（这将挑缺少的单位在您的长度值））。

您一定要使用CSS去。表不应该被用于布局。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top