Выравнивание столбцов нескольких таблиц, используя CSS (или с помощью минимального JS)?

Question

Не уверен, что кто-то успешно достиг этого.Используя CSS (и минимальный JS, если требуется), вы можете сделать так, чтобы относительные столбцы нескольких таблиц имели одинаковую ширину?

<table id="table1">
  <thead>
    <tr>
      <th>Class</th>
      <th>Name</th>
      <th>Age</th>
      <th>Score</th>
    </tr>
  </thead>
</table>

<div>Some text and elements here</div>

<table id="table2">
  <tbody>
    <tr>
      <td>Logic</td>
      <td>Tony</td>
      <td>18</td>
      <td>98</td>
    </tr>
    <tr>
      <td>Logic</td>
      <td>Jane</td>
      <td>14</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

<p>More text here</p>

<table id="table3">
  <tbody>
    <tr>
      <td>Maths</td>
      <td>Peter</td>
      <td>12</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Maths</td>
      <td>Jane</td>
      <td>14</td>
      <td>65</td>
    </tr>
  </tbody>
</table>

<form>
  <fieldset>
    <p>text here</p>
    <table id="table4">
      <tbody>
        <tr>
          <td><input type="text" name="class" /></td>
          <td><input type="text" name="name" /></td>
          <td><input type="text" name="age" /></td>
          <td><input type="text" name="score" /></td>
        </tr>
      </tbody>
    </table>
  </fieldset>
</form>

Если я хочу, чтобы ширина первого, второго, третьего и четвертого столбцов по table#table1, table#table2, table#table3 и table#table4 относительно соответствовала, чтолучший способ сделать это?(Таким образом, все первые столбцы имеют одинаковую ширину; все вторые столбцы имеют одинаковую ширину; и т. Д.)отношения). Однако , я ищу решение без указания ширины, которое позволяет таблицам автоматически настраиваться в соответствии с содержимым, например, поведение table по умолчанию в браузерах.

Другое дело ... Я хочу, чтобы он был обратно совместим со старыми браузерами, такими как IE9, поэтому я думаю, что не следует использовать макеты CSS Flex или Grid.Сожалею.