TD 中的宽度与 colspan 不起作用（Chrome）答案

【问题标题】：Width in TD with colspan not working (Chrome)TD 中的宽度与 colspan 不起作用（Chrome）
【发布时间】：2017-02-06 19:27:05
【问题描述】：

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

【问题讨论】：

jsfiddle.net/CoryDanielson/nHz7V 我在 Chrome 中没有问题，但我在 IE 中有问题

标签： html google-chrome

【解决方案1】：

你猜怎么着！ :) 经过愚蠢的调查（工作 3 小时），我发现由于某种原因 display:table-cell 被 chrome 覆盖了。所以只需广告表格单元格显示，一切都会好的:)。

已编辑的答案 --------- 因此，在检查后似乎某些重置样式表将 display: block 放在 TD 上。因此，如果确实发生了这种情况，您可以删除、编辑或覆盖该样式表。

【讨论】：

应该是评论，虽然你没有太多声望。尝试发布详尽和解释性的答案。
哦，好吧...第一次 :) 感谢您的来信。

【解决方案2】：

哇，好发现.. 这太疯狂了。这似乎是 Chrome 中的一个错误。在这种特殊情况下，如果第 3 列 (c) 超出其宽度 15% 并远离中间列 (b) 的宽度，则它似乎正在占用输入控件的宽度。尝试将<input 标签增加到 700 像素，然后观察 c 列变宽，哈哈。

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

【讨论】：