表差异 Firefox 和 Chrome -- table-row答案

【问题标题】：Table differences Firefox and Chrome -- table-row表差异 Firefox 和 Chrome -- table-row
【发布时间】：2015-05-25 21:40:18
【问题描述】：

我必须制作一个以表格为主的网站（非常旧的网站），有点响应速度。我进行了所有更改，并始终使用 Firefox 开发版和其中的 Responsive Design View 功能对其进行测试。

现在，这在 Firefox 开发版（和标准 Firefox）中看起来不错，但在 Chrome 和其他浏览器中则显示出一些不同。

这就是它在 Firefox 开发版中的样子：

这是它在 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 。有没有一种方法可以快速解决这个问题而无需进行大量额外的编程？

【问题讨论】：

你能提供你的css吗？

标签： html css google-chrome firefox html-table

【解决方案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。

【讨论】：