Webkit 浏览器根据 colspan 渲染表格答案

【问题标题】：Webkit Browsers Rendering for Table Depending on colspanWebkit 浏览器根据 colspan 渲染表格
【发布时间】：2010-08-01 23:20:15
【问题描述】：

请告知我是否产生幻觉......我希望如此，因为我无法根据浏览器正确呈现表格，我希望有人可以为我提供解决方案。

我的问题是某些表格在使用 webkit 的浏览器（即 Safari 和 Chrome）中不显示右侧边框。根据帮助下的 about 菜单项，我使用的 Safari 版本是 4.0.4 (531.21.10)。根据谷歌的网站，我使用的 Chrome 版本应该是最新的，但我在帮助下找不到“关于”菜单选项来确认版本...

有问题的表是那些根据列数使用 colspan 属性的表。如果表格有两列或更少的 colspan 列，则表格正确显示并带有右边框。如果表格有 3 列或更多列带有 colspan，则表格显示时缺少右侧边框。如果表格没有 colspan，则无论列数如何，表格都会正确显示。为什么列数加上colspan属性和中国的鸡蛋价格有关系？

顺便说一句：表格在 IE、FF 和 Opera 中正确呈现...问题仅出在 Safari 和 Chrome...

这是正确显示的两列示例的 HTML 源代码：

<HTML>
<HEAD><TITLE>test Webkit with 2 columns</TITLE></HEAD>
<BODY>
    <TABLE id="GridView1" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY><TR><TD colSpan=2>no items found</TD></TR></TBODY>
    </TABLE>
    <TABLE id="GridView2" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY>
            <TR>
                <TH scope=col>id_pur</TH>
                <TH scope=col>subscription_pur</TH>
            </TR>
            <TR><TD>11</TD><TD>2</TD></TR>
        </TBODY>
    </TABLE>
</BODY>
</HTML>

上面的例子渲染了两个表格，两个表格都显示了右侧边框。

这里是三列示例的 HTML 源代码，其中一个表格呈现不正确：

<HTML>
<HEAD><TITLE>test Webkit with 3 columns</TITLE></HEAD>
<BODY>
    <TABLE id="GridView1" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY><TR><TD colSpan=3>no items found</TD></TR></TBODY>
    </TABLE>
    <TABLE id="GridView2" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY>
            <TR>
                <TH scope=col>id_pur</TH>
                <TH scope=col>subscription_pur</TH>
                <TH scope=col>purchaser_pur</TH>
            </TR>
            <TR><TD>11</TD><TD>2</TD><TD>85</TD></TR>
        </TBODY>
    </TABLE>
</BODY>
</HTML>

对于上面的示例，第一个具有 colspan 的表在使用 webkit 浏览器显示时缺少右边框，但没有 colspan 的第二个表没有缺少边框。

当列数超过两列并且指定了 colspan 属性时，如何让正确的列显示？

【问题讨论】：

标签： google-chrome safari webkit html-table

【解决方案1】：

据我所知，这是 WebKit 中的一个错误。

有一个bug report 似乎与您的问题相似，也许您也可以在其中包含您的示例。该错误报告提出了一种解决方法：添加额外的列以使 colspan 成为必需，或删除不需要的 colspan。

这在 Safari 中正确呈现：

<HTML>
<HEAD><TITLE>test Webkit with 3 columns</TITLE></HEAD>
    <STYLE>
        tr.dummy-row>td { padding: 0; }
    </STYLE>
<BODY>
    <TABLE id="GridView1" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY><TR><TD colSpan=3>no items found</TD></TR></TBODY>
        <TBODY><TR class="dummy-row"><TD></TD><TD></TD><TD></TD></TR></TBODY>
    </TABLE>
</BODY>
</HTML>

【讨论】：