JavaScript でテーブルを動的に作成し、それを div に追加します。結果のテーブルには、概念実証で使用したストレート アップの html テーブルと同じタグとスタイルがすべて含まれているように見えますが、テーブル セルは伸びません。
テーブルに境界線を配置すると、テーブル自体の幅が 100% になっていることがわかりますが、アウトライン化されたセルは単純にそれを埋めるために引き伸ばされません (Chrome の別の 1 つのセル テーブル内のテーブルのように見えます)。
IE と Chrome の両方で同じ動作が得られます。
これが私のコードです:
var tbl = document.createElement("table");
tbl.cellPadding = 0; tbl.cellSpacing = 0;
var tblBody = document.createElement("tblBody");
var tr = document.createElement("tr");
var td;
td = document.createElement("td");
td.style.width="70px";
td.appendChild(this.getFirstDiv());
tr.appendChild(td);
td = document.createElement("td");
td.style.width="300px";
td.appendChild(this.getSecondDiv());
tr.appendChild(td);
td = document.createElement("td");
td.appendChild(this.getThirdDiv());
tr.appendChild(td);
tblBody.appendChild(tr);
tbl.appendChild(tblBody);
ここで明らかな何かが欠けているように感じます。テーブルとテーブル行の表示属性を試しました。width: auto を試しました。
私は何が欠けていますか?