html - 表格差异 Firefox 和 Chrome -- table-row

Question

我不得不让一个以表格为主的网站(非常古老的网站)有点响应。我进行了所有更改，并始终使用 Firefox Dev Edition 和 Responsive Design View 测试它们其中的功能。

现在这在 Firefox Dev Edition(和标准 Firefox)中看起来不错，但在 Chrome 和其他浏览器中显示有点不同。

这是它在 Firefox Dev Edition 中的样子:

这是它在 Chrome 中的样子:

如您所见，我的表格显示略有不同。这是我表格的一部分(表格标题和第一行)的 HTML:

<table class="FontNormal">
    <tbody>
        <tr>
            <td colspan="4" align="right">
                <a href="newtopic.asp">New topic</a>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr class="TableHeader" valign="top">
            <td width="500">Topic</td>
            <td width="150">
                <a href="default.asp?DS=A"><font color="black">Last Post</font></a>&nbsp;<img src="../images/sortdesc.gif">
            </td>
            <td>Product</td>
            <td>Group</td>
        </tr>
        <tr>
            <td style="max-width: 462px;">
                <a href="showtopic.asp?ID=3209">Baxter - Black Piping</a> (0)
            </td>
            <td style="max-width: 462px;">
                14/02/2015 00:29:02
            </td>
            <td style="max-width: 462px;">
                Pharma
            </td>
            <td style="max-width: 462px;">
                BDT Industry
            </td>
            <td style="max-width: 462px;">
                <a href="deletetopic.asp?ParentID=-1&amp;ID=3209">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

我没有 reset.css 。有没有一种方法可以快速解决这个问题，而无需执行大量额外的编程工作？

Answer 1

每行中的列数不同。确保列数一致，浏览器也会一致。我认为您看到的是当每行中的列数不匹配时 Chrome 和 Firefox 之间的不同处理方式。

<table class="FontNormal">
<tbody>
    <tr>
        <td colspan="5" align="right">
            <a href="newtopic.asp">New topic</a>
        </td>
    </tr>
    <tr>
        <td colspan="5">&nbsp;</td>
    </tr>
    <tr class="TableHeader" valign="top">
        <td width="500">Topic</td>
        <td width="150" colspan="2">
            <a href="default.asp?DS=A"><font color="black">Last Post</font></a>&nbsp;<img src="../images/sortdesc.gif">
        </td>
        <td>Product</td>
        <td>Group</td>
    </tr>
    <tr>
        <td style="max-width: 462px;">
            <a href="showtopic.asp?ID=3209">Baxter - Black Piping</a> (0)
        </td>
        <td style="max-width: 462px;">
            14/02/2015 00:29:02
        </td>
        <td style="max-width: 462px;">
            Pharma
        </td>
        <td style="max-width: 462px;">
            BDT Industry
        </td>
        <td style="max-width: 462px;">
            <a href="deletetopic.asp?ParentID=-1&amp;ID=3209">Delete</a>
        </td>
    </tr>
</tbody>

colspan 属性将使一个单元格跨越 X 列，因此如果像上面那样使用，它们将始终等于 5。