如何解决 Chrome 列宽错误？答案

【问题标题】：How to workaround Chrome column-width bug?如何解决 Chrome 列宽错误？
【发布时间】：2015-01-26 22:58:21
【问题描述】：

Chrome 有一个似乎不太可能很快得到修复的错误：

https://code.google.com/p/chromium/issues/detail?id=178369

如果单元格本身包含“width=100%”元素，Chrome 将无法正确处理列宽。

我需要单元格中 100% 宽度的元素。

有人知道该错误的解决方法吗？

测试用例：

<table style="width: 800px; border: 1px solid black">
    <tr>
        <td>
            <table style="width: 100%; border: 1px solid blue">
                <tr>
                    <td style="width: 100%; background: red;">
                        1
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table style="width: 100%;">
                <tr>
                    <td style="width: 100%; background: green;">
                        2
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【问题讨论】：

我想知道你是否可以只使用 99.99%。我知道这并不是真正的修复，但它是否足够接近您的使用？
我刚刚进行了实验，错误仍然存在于任何“宽度”值

标签： html google-chrome

【解决方案1】：

简单添加

table-layout: fixed

对于外部表应该这样做。 http://jsfiddle.net/ysqx6j4t/

【讨论】：

我已经尝试过了，但后来我得到了重叠。另外我想使用“最小宽度”列 - 这些是不可能的表格布局：固定
在这种情况下，最小宽度列是什么意思？您的示例将表格宽度设置为 800px 固定，两个子表格都设置为 100% - 这对我来说看起来很僵硬。如果您希望其中某处具有“流动性”，那么您应该更清楚地描述所需的行为。
“最小宽度”是指该列应占用尽可能少的空间来显示其内容。（绿色单元格右侧的列就是这样一列 - 如果您将任何内容放在那里，它将根据需要以尽可能少的空间显示，但不会更多，因为同一张表中的 width=100% 列会贪婪地占据所有未使用的空间。）

【解决方案2】：

注意：Chrome 会忽略 td 样式宽度，除非它们设置在表格的第一行。（大约 15 年前，IE 曾经这样做过。）

所以第一行不能有一个 td 和 colspan=n。

【讨论】：

【解决方案3】：

对于这是一个回应而不是回答，我提前道歉......

似乎该漏洞现在不仅感染了 Chrome，还感染了新版本的 Opera 和 Vivaldi。这些变通方法都不适用于 Chrome、Vivaldi、Opera（较新版本！），即使在第一行中设置了样式宽度，尤其是在第一行中的任何列设置了“最小宽度”时——贪婪（即 100% 被忽略）。将列宽设置为 100%，以便“贪婪”在所有版本的 Firefox 中都有效（一直回到 3.5 版！）。它也适用于 Opera 12 (!) 但不适用于 Opera 65 —— [这表明仅仅复制别人的代码并不总是有效的。]

aHA 时刻 --> 实际的错误是这样的：如果一个单元格（在任何列中，不一定是第一行中的第一个 col）跨越多个列，并试图强制 colspan 贪婪，则最终仅应用于第一列 - 而不是应用于组。：所以，

<!-- EXAMPLE 0 -->
...
<tr >
<td colspan=4>
<td colspan=8>
     <table border=0 cellspacing=0 cellpadding=0 width=100% style="font-size:11pt;">
     <tr style="font-size:8pt;">
         <td width=100%><hr>
         <td class=pnote>&nbsp;SYNOPSIS / EXAMPLE</tr>

     <tr ><!-- THIS IS WHERE IT WENT WRONG IF THE CELL
                  had any markup in addition to colspan=2 -->
          <td colspan=2><b>layerinfo = </b>App.Do (Environment, 'ReturnLayerProperties', {})

          <!-- another solution is to encapsulate everything in this row/cell in another table ...
          <td colspan=2><table width=100%...
                        </table>
          -->     

     <tr style="font-size:8pt;">
         <td width=100%><hr>
         <td class=pnote>&nbsp;RETURNS</tr>

     <tr >
         <td width=100% nowrap><b>layerinfo : &nbsp;{</b>
         <td class=pnote>&nbsp;</td>
     ...
     </table></tr>

而现在的结果是正确的[(a)

和标签不再平均分割行，也 (b) 跨单元格上的文本不再定义宽度表的第一列。（奇怪，但它发生了）

【讨论】：