HTML table header 元素的设置宽度 JavaScript 不更新

Question

我有一个 HTML table，由于 table 标题 (<th>) 会根据 table 的宽度自动设置自己的宽度数据 (<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 开发工具中所示，但网页上的实际 table 不会更新。我尝试通过 Chrome Dev Tools 将值编辑为 1000px 和 100% 等大数字，但这没有任何作用。我错过了什么吗？

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

Answer 1

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

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

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

HTML table header 元素的设置宽度 JavaScript 不更新

Setting width of HTML table header elements via JavaScript not updating

html

javascript

css

width