0

我正在尝试使用下面的代码构建一个 HTML 表（4.01 过渡）。它使用 Windows 中的 chrome 进行渲染，但在 Ubuntu 提供的 Firefox 17.0.1 中以意想不到的方式渲染。在 Ubuntu 上，第 2 行和第 3 行的第一列宽度相同。此外，第 3 行的第 2 列与第 2 行的最后 3 列的宽度相同。我能做些什么来兼容更多浏览器吗？

<table width="500">
    <tr>
        <td align="center" colspan="5" width="500">5 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="2" width="200">2 wide</td>
        <td align="center" colspan="1" width="100">1 wide</td>
        <td align="center" colspan="1" width="100">1 wide</td>
        <td align="center" colspan="1" width="100">1 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="1" width="100">1 wide</td>
        <td align="center" colspan="4" width="400">4 wide</td>
    </tr>
</table>

开始编辑

我不确定这是不是最好的方法，但我在浏览器之间实现了<colgroup>和<col>元素的一致行为。 

<table width="500">
    <colgroup>
        <col width="25" />
        <col width="75" />
        <col width="200" />
        <col width="100" />
        <col width="100" />
    </colgroup>
    <tr>
        <td align="center" colspan="5">5 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="2">2 wide</td>
        <td align="center" colspan="1">1 wide</td>
        <td align="center" colspan="1">1 wide</td>
        <td align="center" colspan="1">1 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="1">1 wide</td>
        <td align="center" colspan="4">4 wide</td>
    </tr>
</table>
4

1 回答 1

1

最简单的解决方案是添加标记

<col><col><col><col><col>

在<table>标签和 CSS 规则之后

col { width: 100px }

现在使用的表格标记违反了 HTML 表格模型，至少在 HTML5 草案中定义并由某些浏览器解释。如果您在 HTML5 模式下使用W3C 标记验证器检查标记，您将收到（除了有关表示属性的消息之外）错误消息“由元素 td 建立的表列 5 没有以它开头的单元格。” 真正的问题是，而不是像您所说的那样，从第 2 列开始没有单元格。

添加一个<tr><td><td><td><td><td></tr>，将单元格宽度设置为 100 像素，说明问题所在。但是使用这样的虚拟行通常会干扰您的布局。所以最好用col元素来指定列结构。

于 2012-12-31T07:09:39.730 回答