Question

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

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

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

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

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

测试用例：

<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>

Answer 1

简单地添加

table-layout: fixed

外表的

应该这样做。 http://jsfiddle.net/ysqx6j4t/

Answer 2

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

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

Answer 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）跨度单元格上的文本也不再定义宽度表第一列的（很奇怪，但是确实发生了）

如何解决Chrome列宽错误？

3 个答案: