Javascript 影响其他行中其他tds的td大小

我有一个表格，第一行是两个单元格， 第二个是3。 第一个单元格（[0,0]）是一个文本框，其他所有单元格都是按钮。 对于此代码：

var tr0 = document.createElement('TR'); //the first row
table.appendChild(tr);

var td0 = document.createElement('TD');
tr1.appendChild(td0);
var textbox = document.createElement('INPUT');
textbox.setAttribute('TYPE', 'text');
td0.appendChild(textbox);

var td1= document.createElement('TD');
tr0.appendChild(td1);
var clear = document.createElement('INPUT');
clear.setAttribute('TYPE', 'button');
clear.setAttribute('VALUE', 'C');
td1.appendChild(clear);

var tr1 = document.createElement('TR'); //the second row
table.appendChild(tr1);

var td1_0 = document.createElement('TD');
tr1.appendChild(td1_0);
var one = document.createElement('INPUT');
one.setAttribute('TYPE', 'button');
one.value='1';
td1_0.appendChild(one);


var td1_1 = document.createElement('TD');
tr1.appendChild(td1_1);
var two = document.createElement('INPUT');
two.setAttribute('TYPE', 'button');
two.value='2';
td1_1.appendChild(two);

var td1_2 = document.createElement('TD');
tr1.appendChild(td1_2);
var three = document.createElement('INPUT');
three.setAttribute('TYPE', 'button'); 
three.value='3';
td1_2.appendChild(three);

我得到：

---

我想知道原因以及如何在javascript中修复它，不能使用JQuery，它必须在js文件中。提前通知tnx

您的问题似乎是由于每行的列数不同造成的

colspan

属性将两个或多个列连接到一个列

请参见此处的差异：

我想您的代码应该是这样的：

var td0 = document.createElement('TD');
td0.setAttribute('colspan', '2');
tr1.appendChild(td0);

---

如果希望所有内容并排显示，则不需要为每个输入创建新的表格单元格。把每个按钮放在同一个单元格里

var tr0 = document.createElement('TR'); //the first row
table.appendChild(tr0);

var td0 = document.createElement('TD');
tr0.appendChild(td0);
var textbox = document.createElement('INPUT');
textbox.setAttribute('TYPE', 'text');
td0.appendChild(textbox);

var clear = document.createElement('INPUT');
clear.setAttribute('TYPE', 'button');
clear.setAttribute('VALUE', 'C');
td0.appendChild(clear);

var tr1 = document.createElement('TR'); //the second row
table.appendChild(tr1);

var td1 = document.createElement('TD');
tr1.appendChild(td1);
var one = document.createElement('INPUT');
one.setAttribute('TYPE', 'button');
one.value='1';
td1.appendChild(one);


var two = document.createElement('INPUT');
two.setAttribute('TYPE', 'button');
two.value='2';
td1.appendChild(two);

var three = document.createElement('INPUT');
three.setAttribute('TYPE', 'button'); 
three.value='3';
td1.appendChild(three);

您会注意到现在只有两个TD元素（td0和td1），您的输入元素（文本框和按钮）被附加到其中一个元素上。您还可以将这些内容放在div元素的段落中，而不是放在表中，但这取决于您：）

比如说

var div0 = document.createElement('div'); //the first row
var textbox = document.createElement('INPUT');
textbox.setAttribute('TYPE', 'text');
div0.appendChild(textbox);

---

你在期待什么。这正是HTML表的呈现方式。列的宽度始终相同。您的文本框很宽，使第一列变宽，并将影响第二行的第一列。@Robbert，我可以看到，但我如何解决这个问题？我希望“1”将位于“2”和“3”的旁边。请添加一些解释，说明此代码为什么有助于OP。这将有助于提供一个未来观众可以学习的答案。有关更多信息，请参阅。@MikeMcCaughan感谢您的指示。我重写了答案。@KazmaArakaki谢谢，但这不是问题所在。问题是该列的所有单元格的宽度都相同，列中的第一个单元格定义了该列其余部分的大小。。