0

I have an HTML table, and since the table headings (<th>) automatically set their own width based on the width of table data (<td>), I am trying to add 10px to whatever value it sets.

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

Logging my starting and ending width works fine, everything is normal (ie: "14px" to "24px"), the values do get set, as seen in the Chrome Dev Tools, but the actual table on the webpage doesn't update. I tried editing the values via Chrome Dev Tools to large numbers like 1000px and 100%, but that did nothing. Am I missing something?

Note: I'm using Electron, latest, on Windows, latest (but I would assume this is a problem with my general HTML code and doesn't have to do with how Electron works).

APixel Visuals
  • 1,508
  • 4
  • 20
  • 38
  • Does table-layout:fixed help? https://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell – danday74 Oct 17 '18 at 01:29

1 Answers1

1

You could increase 10px in each 'th' using CSS style, setting the padding of the element.

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

If your table is setting to 100% width, and you increase the width of all elements, you will not see the difference, no matter how many pixels you are using to do this.

Rafael Lopes
  • 463
  • 3
  • 8