javascript - 使用 colspan 创建新的表格行会更改 IE 中的单元格大小

Question

我正在解决一个相当复杂的问题，并尝试将我的问题简化为一个简短的代码示例。

当我创建新的 <tr> 时在带有 jQ​​uery 的表格中，并将 colspan 设置为总列数，表格单元格的宽度(未在代码中设置)会发生变化。这种情况在 IE9 中会发生，但在 Chrome 中不会。我知道我可以在代码中明确给出像元大小，但在我使用的解决方案中我无法真正做到这一点。

代码如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript" ></script>

<script type="text/javascript">
    var expanded = false;
    var $detailsRow;
    $(document).ready(function(){
        //toggle the details row
        $(".selectable-row").click(function(){
            if(expanded){
                $detailsRow.remove();
                expanded = false;
            }else{
                $detailsRow = $("<tr class=\"child-row\"><td colspan=\"4\">");
                $detailsRow.find("td").text("Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello Hellohellohellohellohellohello");
                $detailsRow.insertAfter($(this));
                expanded = true;
            }
        });
    });
</script>

<div style="width:1000px">
    <table border="1" style="width:100%">
        <tr class="selectable-row">
            <td>2012-09-03 11:33</td>
            <td>This is the 2nd column</td>
            <td>The 3rd column</td>
            <td>The last one</td>
        </tr>
    </table>
</div>

请注意，这是一个细微的差异，第二个已展开，并且日期单元格稍小。

有人可以解释为什么会发生这种情况吗？是否有解决办法？也许以某种方式用 div 包裹单元格的内部。我已经尽力了。

Answer 1

您看到的是 pixel-rounding error 。 Here另一个谈论它的链接。

如果你将你的代码发布到js fiddle中，你会得到你提到的div宽度为1000的错误，但不是1001，也不是1002，而是1003、1004，而不是1005。 。如果您将列号更改为 3，Chrome 还会向您显示 1001、1002 的错误。

我不确定当您添加 col-span 时如何重新计算表格列宽，这首先会导致偏移，因为表格的尺寸本身不会改变。

作为 K.K.提到的，设置 width: 25% 也为我解决了这个问题。