and sorry for my bad English.  

I have some table created on my page dynamicly, depenting on what a user have access to or not.  

I create a table with 2 rows that is my header, and the in a nest for() I create all the other tables.  

My Finall setup is something like that:

```
<table class="table">
  <tr>
    <td class="col1">Header 1</td>
    <td class="col2">Header 2</td>
    <td class="col3">Header 3</td>
    <td class="col4">Header 4</td>
  </tr>
</table>
<table class="table">
  <tr>
    <td class="col1">column 1 for access 1</td>
    <td class="col2">column 2 for access 1</td>
    <td class="col3">column 3 for access 1</td>
    <td class="col4">column 4 for access 1</td>
  </tr>
</table>
<table class="table">
  <tr>
    <td class="col1">column 1 for access 2</td>
    <td class="col2">column 2 for access 2</td>
    <td class="col3">column 3 for access 2</td>
    <td class="col4">column 4 for access 2</td>
  </tr>
</table>
<table class="table">
  <tr>
    <td class="col1">column 1 for access 2</td>
    <td class="col2">column 2 for access 2</td>
    <td class="col3">column 3 for access 2</td>
    <td class="col4">column 4 for access 2</td>
  </tr>
</table>

```

My CCS is

```
.tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #aabcfe;
  white-space: nowrap;
}
  .tg td {
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 1px 1px;
    border-style: solid;
    border-width: 1px;
    overflow: visible;
    word-break: normal;
    border-color: #aabcfe;
    color: #669;
    background-color: #e8edff;
  }
  .tg th {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    padding: 1px 1px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: #aabcfe;
    color: #039;
    background-color: #b9c9fe;
  }
    .tg .tg-column1{
      background-color: #e7ffe7;
      color: #000000;
      border-color: #000000;
      text-align: right;
      vertical-align: middle
    }
    .tg .tg-column2{
      font-weight: bold;
      color: #000000;
      border-color: #000000;
      text-align: center;
      vertical-align: middle;
      position: sticky;
      position: -webkit-sticky;
      top: -1px;
      will-change: transform
    }
    .tg .tg-column3{
      background-color: #e7ffe7;
      color: #000000;
      border-color: #000000;
      text-align: right;
      vertical-align: middle
    }
    .tg .tg-column4{
      font-weight: bold;
      color: #000000;
      border-color: #000000;
      text-align: center;
      vertical-align: middle;
      position: sticky;
      position: -webkit-sticky;
      top: -1px;
      will-change: transform
    }

```

The width of each colum in each table is diffrent.  

Is there a way for all table column1 for example to have the some width equal to the max width of all tables?  

Now I'm getting something the below picture  

[![enter image description here](https://i.stack.imgur.com/3OTbu.png)](https://i.stack.imgur.com/3OTbu.png)