在数组中查找每个对象的 offsetWidth -- Javascript (NO JQuery)

Question

我已经为此寻找了几个小时的答案：

如何让 console.log 打印表格中每个 td 的 offsetWidth？ （不使用 JQuery）

假设我有这张桌子：

                <table>
                    <thead>
                        <tr>
                            <th>One</th>
                            <th>Two</th>
                            <th>Three</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>A One</td>
                            <td>A Two</td>
                            <td>A Three</td>
                        </tr>
                        <tr>
                            <td>B One</td>
                            <td>B Two</td>
                            <td>B Three</td>
                        </tr>
                    </tbody>
                </table>

我想在第一行中找到每个<td> 的 offsetWidth。

我试过这个：

var tbodyfistRowCells = tbody.querySelectorAll('tr:first-of-type > td');

for(i = 0; i < tbodyfistRowCells.length; i++){var tbodyColumnWidths = tbodyfistRowCells[i].offsetWidth;}
console.log(tbodyColumnWidths);

它只返回最后一个<td> 的偏移宽度。我需要每个<td> 的 offsetWidth。

我是 Javascript 新手。我确定我遗漏了一些明显而重要的东西，我只是不知道该要求互联网搜索什么......

注意： 这样做的最终目标是使用 <td> 的 offsetWidth 来设置其各自的宽度 <th> 当标题固定到我的页面顶部时（希望覆盖固定的列宽问题）。如果您能告诉我如何使用一个数组的 offsetWidth 来更改其在另一个数组中的相应索引项（即td[2].offsetWidth = th[2].offsetWidth），那将是一个很大的优势，尽管显然不是这个问题的主题。

Answer 1

试试这个（演示 - https://codepen.io/Alexander9111/pen/dyPwJvM）

const tbody = document.querySelector('tbody');
const tbodyfistRowCells = tbody.querySelectorAll('tr:first-of-type > td');

for(i = 0; i < tbodyfistRowCells.length; i++){
    var tbodyColumnWidths = tbodyfistRowCells[i].offsetWidth;
    console.log(i, tbodyfistRowCells[i].innerText)
    console.log(i, tbodyColumnWidths)
}

注意我首先找到<tbody> 元素

控制台输出：

0 "A One"
0 44
1 "A Two"
1 45
2 "A Three"
2 54