table下tbody滚动条与thead对齐的方法且每一列可以不均等

要实现table下的tbody滚动条与thead对齐的效果，可以使用以下方法：

1. 将thead与tbody分开放到两个div中，一个div用于显示thead，另一个div用于显示tbody，这两个div都设置为相同的宽度。

2. 对于tbody所在的div，设置overflow属性为auto，这样当tbody内容超出div的高度时，会自动生成滚动条。

3. 针对每一列，可以通过设置不同的宽度来实现不均等。

具体实现代码如下：

HTML代码：

<div class="table-container">
  <div class="thead-container">
    <table>
      <thead>
        <tr>
          <th style="width: 100px;">列1</th>
          <th style="width: 200px;">列2</th>
          <th style="width: 150px;">列3</th>
          <th style="width: 50px;">列4</th>
        </tr>
      </thead>
    </table>
  </div>

  <div class="tbody-container">
    <table>
      <tbody>
        <tr>
          <td style="width: 100px;">内容1</td>
          <td style="width: 200px;">内容2</td>
          <td style="width: 150px;">内容3</td>
          <td style="width: 50px;">内容4</td>
        </tr>
        <tr>
          <td style="width: 100px;">内容1</td>
          <td style="width: 200px;">内容2</td>
          <td style="width: 150px;">内容3</td>
          <td style="width: 50px;">内容4</td>
        </tr>
        <!-- more rows -->
      </tbody>
    </table>
  </div>
</div>

CSS代码：

.table-container {
  display: flex;
  flex-direction: column;
  height: 300px; /* 设置表格高度 */
}

.thead-container {
  overflow: hidden;
  height: 30px; /* 设置表头高度 */
}

.thead-container table {
  width: 100%; /* 与tbody-container同宽 */
  border-collapse: collapse;
}

.tbody-container {
  flex: 1;
  overflow: auto; /* 当tbody内容超出div高度时，显示滚动条 */
}

.tbody-container table {
  width: 100%; /* 与thead-container同宽 */
  border-collapse: collapse;
}

.tbody-container td,
.tbody-container th {
  white-space: nowrap; /* 防止文字换行 */
}

通过以上代码，就可以实现thead与tbody对齐，并且每一列可以不均等的效果。