javascript - 无法在 js 生成的表中设置 td 宽度

Question

我正在生成一个简单的 html 表，并希望在同一行中有不同宽度的列。但是，当我尝试使用像素或 % 设置宽度时，显示没有任何变化。此外，添加的第一列('td' 元素)总是比后来添加的其他列宽得多。我已经尝试在创建元素之后和将其附加为子节点之前设置宽度，以及仅在将元素附加为子节点之后设置宽度。这是我尝试过的示例:

                    var tr = document.createElement('TR');
                    tr.style.margin = "50px"

                    //scoring column
                    var td0 = document.createElement('TD')
                    td0.style.padding = '1em'
                    td0.style.width = '2px'

                    var tr11 = document.createElement('TR');
                    tr11.style.margin = "50px"
                    tr11.innerHTML ="score: " +  ascore_array[i + offset];

                    var tr22 = document.createElement('TR');
                    tr22.style.margin = "50px"
                    tr22.innerHTML ="num votes: " +  anumVotes_array[i + offset];

                    td0.appendChild(tr11)
                    td0.appendChild(tr22)


                    //answer column
                    var td1 = document.createElement('TD')
                    td1.style.padding = "1em"
                    td1.innerHTML =   auser_array[i + offset]

                    tr.appendChild(td0)
                    td0.style.width = "20%"
                    tr.appendChild(td1)
                    td1.style.width = "30%"

如您在上面的代码中所见，我已经尝试将 px 和 % 作为宽度单位。我还尝试在将元素设置为子节点之前和之后设置宽度。我的代码没有变化。另外，我使用的是 css 模板，但它们只为我的表格元素设置了默认背景颜色。 css 中没有任何内容可以调整 td 元素的大小。我也尝试调整 td 元素中 tr 元素的大小，但这也没有效果。

我使用 Chrome 作为我的浏览器。

我做错了什么，我该如何解决？

Answer 1

好的，我想我知道问题出在哪里了。有一个 <col style="width: 80%;">和一个 <col style="width: 20%;">在根之间 <table>和 <tbody>这会覆盖您在 <td> 中的样式下面