<html>
<head>
<title>Don't let appendChild break the table column count (bug 3702)</title>
</head>
<body>
<p>Both rows should have the same width (725px).</p>
<table cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 725px;">
    <tr id='first_row'>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

<!-- reference rendering -->
<table cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 725px;">
    <tr>
        <td style="background-color: LawnGreen;">1</td>
        <td style="background-color: Cyan;">2</td>
        <td style="background-color: Yellow;">3</td>
        <td style="background-color: Orange;">4</td>
    </tr>
</table>


<script>
    firstRow = document.getElementById("first_row")
	
	function addCell(color) {
        cell = document.createElement("td");
        cell.appendChild(document.createTextNode("cell"));
        cell.setAttribute("style", "background-color: " + color + ";");
        firstRow.appendChild(cell);
	}
	
	addCell("LawnGreen");
	addCell("Cyan");
	addCell("Yellow");
	addCell("Orange");
</script>
</body>
</html>
