Javascript Code To Make Sure Table Column Widths Are Consistent

auto_adjust_table_column_widths.js

function equalize_widths(table) {
  var col_count = [...table.querySelectorAll('thead > tr > th')].length;

  var total_table_width = 0;

  for (let i=0; i<col_count; i++) {
    let elements = [...table.querySelectorAll(`thead > tr > th:nth-child(${i+1}), tbody > tr > td:nth-child(${i+1})`)];

    let max_column_width = elements.reduce(function(acc, el) {
      let computedStyle = window.getComputedStyle(el);
      let extraSpacing = parseFloat(computedStyle.getPropertyValue('padding-right')) +
                         parseFloat(computedStyle.getPropertyValue('padding-left')) +
                         parseFloat(computedStyle.getPropertyValue('margin-right')) +
                         parseFloat(computedStyle.getPropertyValue('margin-left')) +
                         parseFloat(computedStyle.getPropertyValue('border-right-width')) +
                         parseFloat(computedStyle.getPropertyValue('border-left-width'));

      let totalWidth = Math.max(el.offsetWidth, el.scrollWidth) + extraSpacing;

      return Math.max(acc, totalWidth);
    }, 0);

    total_table_width += max_column_width;

    elements.forEach(function(el) {
      el.style.minWidth = `${max_column_width}px`;
    });
  }

  table.style.width = `${total_table_width}px`;
}