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

【问题标题】：Setting width of HTML table header elements via JavaScript not updating通过 JavaScript 设置 HTML 表头元素的宽度不更新
【发布时间】：2018-10-17 09:27:44
【问题描述】：

我有一个 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，latest（但我认为这是我的一般 HTML 代码的问题，与 Electron 的工作方式无关） .

【问题讨论】：

table-layout:fixed 有帮助吗？ stackoverflow.com/questions/4457506/…

标签： javascript html css width

【解决方案1】：

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

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

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

【讨论】：