Question

以下代码无法在Chrome中正确呈现顶行（IE8呈现正常，我尚未在其他浏览器中测试过）

<head>
</head>
<body>
<table width="100%" border="1">
    <tr>
            <td width="15%">a</td>
            <td width="70%">b</td>
            <td width="15%">c
                    <table border=1>
                    <tr>
                            <td valign="top">Subtotal:</td>
                            <td valign="top">$2,464.34</td>
                    </tr>
                    </table>
            </td>
    </tr>
    <tr>
            <td colspan="3">
                    <input type="text" style="width:500px;" />
            </td>
    </tr>
    </table>
</body>

似乎INPUT控件中的固定宽度导致了问题。如果我将500px改为80％，它会神奇地正常工作。或者，如果我取出“c”栏中的内部表格，它也可以。

为什么看起来colspan = 3被忽略了？有什么想法吗？

Answer 1

猜猜是什么！ :)经过愚蠢的调查（3小时工作）我发现由于某种原因显示：表格单元格被覆盖铬。所以只需广告表单元格显示，一切都会很好：）。

编辑回答--------- 所以在检查之后似乎有些重置样式表将display：block放在TD上。因此，如果确实发生了这种情况，您可以删除该样式表，编辑或覆盖它。

Answer 2

哇，好发现......那太疯狂了。这似乎是Chrome中的一个错误。在这种特殊情况下，如果输入控件的宽度超出宽度的15%，则第3列（c）似乎占据输入控件的宽度，并且远离中间列（b）的宽度。尝试将<input标记增加到700px并观察列c变宽lol。

chrome的解决方法可能只是使用%作为输入控件的宽度单位

使用colspan不起作用的TD宽度（Chrome）

2 个答案: