1

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

当我<tr>使用 jQuery 在表格中创建一个新表格并将 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>

请注意，这是一个细微的差别，第二个是展开的，并且 date-cell 稍小一些 请注意，这是一个细微的差别，第二个是展开的，并且日期单元格略小一些。

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

4

2 回答 2

1

您看到的是像素舍入错误。 这里有另一个链接在谈论它。

如果您将代码发布到 js fiddle 中，您将收到您谈到的 div 宽度为 1000 的错误，但不是 1001，也不是 1002，而是再次出现 1003、1004，而不是再次出现 1005 ......如果你将列号更改为 3，Chrome 也会显示 1001、1002 的错误。

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

正如 KK 提到的，设置 width: 25% 也为我解决了这个问题。

于 2012-09-11T15:53:09.303 回答
0

您是否应用了任何 css 来控制单元格宽度？因为在单元格上添加 css 属性后，它会停止变小/变大。

<style type="text/css">
    .selectable-row td { width: 25%; }
</style>
于 2012-09-11T15:44:28.417 回答