JSFiddle - React, Tailwind, and code Playground

HTML

<table id="t1" class="standard"> 
  <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
  </tr>
</table>

<!-- table "t2" intended to have equal column widths -->
<table id="t2" class="standard">
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
      <td>12345678901234567890A</td>
      <td>123456789012345678901234567890A</td>
      <td>12345678901234567890A</td>
      <td>1234567890A</td>
  </tr>
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
      <td>12345678901234567890A</td>
      <td>1234567890A</td>
      <td>123456789012345678901234567890A</td>
      <td>12345678901234567890A</td>
  </tr>
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
      <td>12345678901234567890A</td>
      <td>1234567890A</td>
      <td>123456789012345678901234567890A</td>
      <td>12345678901234567890A</td>
  </tr>
</table>

SCSS

table.standard {
    table-layout: fixed;
	border-collapse: collapse;
	td, th {
		border-right: 3px solid black;
		border-bottom: 3px solid black;
		padding: 8px;
		margin: 0px;
	}
}

JavaScript

var recorded_left_width=get_width(new Array(), $("#t1"));
var recorded_left_width=get_width(recorded_left_width, $("#t2"));
adjust_width(recorded_left_width, $("#t1"));
adjust_width(recorded_left_width, $("#t2"));

var table_width = $("#t1").width()
$("#t1, #t2").width(table_width);

function get_width(widthArray, table)
{
	var newArray=widthArray.slice(0);
	$.each(table.find("tr:visible:first td, tr:visible:first th"), function(i,td) {
		newArray[i]=$(td).width();
		if(typeof(widthArray[i])!="undefined" && widthArray[i] > newArray[i])
			newArray[i]=widthArray[i];
	});
	return newArray;
}
function adjust_width(widthArray, table)
{
	$.each(table.find("tr:visible:first td, tr:visible:first th"), function(i,td) {
		$(td).css("minWidth", widthArray[i]);
		$(td).width(widthArray[i]);
	});
    
}