How can I make multiple html tables have the same column widths

How do you use the css styling? You should set fixed width to cells in first row of each table.

<table>
  <tr>
    <td style="width:100px"></td>
    <td style="width:120px"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>

Edit: It's of course better to use css classes, but you can change that once you will see if it works for you.

<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>
<!-- ... -->
<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>

etc..

The simplest way is to use the :nth-child selector:

table td:nth-child(1) { width: 100px; }
table td:nth-child(2) { width: 300px; }
table td:nth-child(3) { width: 225px; }

<table>
  <tr>
    <td>Col 1 Table 1</td>
    <td>Col 2 Table 1</td>
    <td>Col 3 Table 1</td>
  </tr>
</table>

<table>
  <tr>
    <td>Col 1 Table 2</td>
    <td>Col 2 Table 2</td>
    <td>Col 3 Table 2</td>
  </tr>
</table>

Alternatively you could give each td its' own class, but this isn't ideal as you need to manually keep tracks of those classes, which can be a pain in a dynamically amended table:

.column-1 { width: 100px; }
.column-2 { width: 300px; }
.column-3 { width: 225px; }

<table>
  <tr>
    <td class="column-1">Col 1 Table 1</td>
    <td class="column-2">Col 2 Table 1</td>
    <td class="column-3">Col 3 Table 1</td>
  </tr>
</table>

<table>
  <tr>
    <td class="column-1">Col 1 Table 2</td>
    <td class="column-2">Col 2 Table 2</td>
    <td class="column-3">Col 3 Table 2</td>
  </tr>
</table>