使用colspan創建新的表行會更改IE中的單元格大小

Question

我正在研究一個相當復雜的問題，並試圖將我的問題簡化為一個簡短的代碼示例。

當我使用jQuery在表中創建新的<tr>並將colspan設置為column-number-of-columns時，表單元格的寬度（未在代碼中設置）改變。 這種情況在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

您看到的是像素舍入誤差 。 這里是另一個談論它的鏈接。

如果將代碼放到js小提琴中，則會得到關於div寬度1000的錯誤，但不是1001，也不是1002，而是1003、1004，而不是1005 ...如果將列號更改為3，Chrome也會向您顯示1001、1002錯誤。

我不確定在添加col-span時如何重新計算表格的列寬，因為表格的尺寸本身不會改變，因此首先會引起移位。

正如KK所提到的，設置寬度：25％也為我解決了這個問題。

Answer 2

您是否應用了任何CSS來控制單元格的寬度？是因為在單元格上添加了CSS屬性后，它的大小停止了。

<style type="text/css">
    .selectable-row td { width: 25%; }
</style>