UA: Mit insertRow und insertCell (bzw über innerHTML) angefügte Zeilen (contenteditable) ohne Text haben keine Höhe und sind nicht auswählbar. Warum? Wie ändern?

Beitrag lesen

Hallo! Im angefügten Beispiel hat leider die zuerst neu angefügte Tabellenzeile keine Höhe. Sie ist auch nicht auswählbar mittels der Pfeiltasten, wenn der Cursor in einer der auswählbaren Tabellenzellen steht.

Wie bekomme ich es hin, dass die neue Zeile, die jedoch keinen Text hat, trotzdem die "normale" Höhe hat und auswählbar ist? ("Normal" insofern, als das im tatsächlichen Programm die Tabelle nach dem body onload event erst mittels .innerHTML eingefügt wird, und dabei die leeren Zeilen alle eben eine einfache Höhe haben und auswählbar sind.)

<html><head>
<style type="text/css">
table,td { border: 1px solid black;  }

.myTable { border: 1px solid black; border-collapse: collapse; text-align: center; }
.myTable td { padding:0px; border-spacing:0px; }
</style>
<script>
 function addRow() {
	var t = document.getElementById('t');

	var newRow = t.insertRow(); var newCell;
	newRow.innerHTML = '<td></td><td></td><td></td><td></td>';
	
	newRow = t.insertRow();
	newRow.innerHTML = '<td>three</td><td></td><td></td><td></td>';
 }
</script>
</head>
<body onload="addRow()">
<table id="t" class="myTable" style="width:99%;" contenteditable="true">
<tr><td>one</td><td></td><td></td><td></td></tr>
</table>

</body>
</html>