HTML / CSS表/行

对不起,我的英语不好。 我在页面上动态创建了一些表,这取决于用户是否可以访问。 我创建了一个包含两行的表,该行是我的标题,并且在嵌套的for()中创建了所有其他表。 我的Finall设置是这样的:

<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>

我的CCS是

.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

评论