html表格中有5列单元格有3列设置了固定宽度剩下的两列是自适应的用鼠标能拖动大小，如何让自适应的两个单元格初始化时一个单元格大，一个小

为了实现HTML表格中这种布局，你可以使用CSS的`display`, `flexbox`, 或者`grid`属性来控制单元格的大小和布局。这里我们使用`display: flex`来演示：

首先，在HTML中创建一个简单的表格结构：

<table style="width: 100%;">
  <tr>
    <th>固定列1</th>
    <th>固定列2</th>
    <th class="flex-item">自适应列1</th>
    <th class="flex-item">自适应列2</th>
  </tr>
</table>

然后在CSS中设置样式，其中`.flex-item`类用于标记需要自适应的列：

table {
  display: table;
}

th {
  width: 20%; /* 定义固定列宽度 */
}

.flex-item {
  flex: 1; /* 自适应列，默认按比例分配剩余空间 */
  min-width: 0; /* 设置最小宽度为0，允许高度收缩 */
  max-width: none; /* 取消最大宽度限制，以便调整大小 */
  overflow-wrap: break-word; /* 如果文字超出容器，允许换行 */
}

/* 初始化时给第一个自适应列较大的初始宽度 */
.th-first-adaptive {
  flex-basis: 60%; /* 这里设置为60%，可以根据需求调整 */
}

最后，在JavaScript中，如果需要动态操作（例如点击事件触发），