TD中的colspan属性设置宽度无效（Chrome浏览器）

Question

TD中的colspan属性设置宽度无效（Chrome浏览器）

5

以下代码在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被忽略了呢？有什么想法吗？

- tono

http://jsfiddle.net/CoryDanielson/nHz7V/ 我在Chrome中没有这个问题，但是在IE中有。 - Cory Danielson

2个回答

0

哇，好发现...这真的很疯狂。看起来这是Chrome的一个bug。在这种情况下，第三列(c)似乎会占用输入控件的宽度，如果它超过了其15%的宽度，则会从中间列(b)的宽度中减去。试着将标签增加到700px，看看c列变得更宽了，哈哈。

对于Chrome的解决方法可能就是只使用“％”作为该输入控件的宽度单位。

- Nick Rolando

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Basil Mohammad · Accepted Answer

猜猜看！ :) 在愚蠢的调查（3小时的工作）后，我发现在Chrome浏览器中，某种原因导致display：table-cell被覆盖。所以只需添加table-cell显示即可解决问题 :).

编辑答案--------- 经过检查，似乎一些重置样式表会在TD上放置display：block。因此，如果确实发生这种情况，则可以删除该样式表，进行编辑或覆盖。