1.我已将表格的显示更改为block，这将有助于表格水平居中对齐。
1.我已经给了position: sticky; top: 0到head tr，这将使它在滚动时粘在顶部。
1.我将min-width: 100px;赋给th，td，它将设置每个单元格的最小宽度，并确保标题单元格的宽度与正文单元格的宽度匹配。
最后，我删除了flex-flow: column;, display: table; and table-layout: fixed;，因为它们不是必需的。我在tbody元素上设置了overflow-y: auto; and overflow-x: hidden;，使正文在内容溢出时可以滚动。

table {
    /* border: 5px solid red; */
    display: block;
    width: 100%;
}

thead tr {
    position: sticky;
    top: 0;
}

tbody {
    overflow-y: auto;
    overflow-x: hidden;
}

th, td {
    min-width: 100px;
    text-align: left;
}

<!--The content below is only a placeholder and can be replaced.-->
<table>
  <thead>
    <tr>
      <th>Account No.</th>
      <th>Date</th>
      <th>Transaction Details</th>
      <th>Value date</th>
      <th>details</th>
      <th>Deposit AMT</th>
      <th>Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>10-10-2023</td>
      <td>ALJDFLDOI 4584</td>
      <td>10-10-2023</td>
      <td>This is test data !This is test data !This is test data !</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>1</td>
      <td>10-10-2023</td>
      <td>ALJDFLDOI 4584</td>
      <td>10-10-2023</td>
      <td>This is test data !This is test data !This is test data !</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>1</td>
      <td>10-10-2023</td>
      <td>ALJDFLDOI 4584</td>
      <td>10-10-2023</td>
      <td>This is test data !This is test data !This is test data !</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>1</td>
      <td>10-10-2023</td>
      <td>ALJDFLDOI 4584</td>
      <td>10-10-2023</td>
      <td>This is test data !This is test data !This is test data !</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

<div style="height: 2000px;"></div>