通过不更新的 JavaScript 设置 HTML 表头元素的宽度

Question

我有一个HTML表格，由于表格标题(<th>(根据表格数据的宽度(<td>(自动设置自己的宽度，我正在尝试将10px添加到它设置的任何值中。

Array.from(document.getElementsByTagName("th")).forEach(th => {
th.style.width = `${parseInt(window.getComputedStyle(th).getPropertyValue("width").split("px")[0]) + 10}px`;
});

记录我的起始和结束宽度工作正常，一切都正常(即："14px"到"24px"(，值确实被设置，如 Chrome 开发工具所示，但网页上的实际表格不会更新。我尝试通过Chrome开发工具将值编辑为1000px和100%等大量数字，但这没有任何作用。我错过了什么吗？

注意：我在Windows上使用Electron，latest，late(但我认为这是我的一般HTML代码的问题，与Electron的工作方式无关(。

Answer 1

您可以使用CSS样式在每个"th"中增加10px，设置元素的填充。

<style>
th { padding: 0px 10px; }
</style>

---

如果将表格设置为 100% 宽度，并且增加了所有元素的宽度，则无论使用多少像素来执行此操作，都不会看到差异。