JavaScript实现两个Table固定表头根据页面大小自行调整

在JavaScript中，实现一个具有固定表头并且能根据页面大小自动调整宽度的表格，通常我们会结合CSS来完成样式的设置，并使用JavaScript来处理动态调整的逻辑。下面是一个基本的实现方案：

### HTML 结构

首先，我们需要一个基本的HTML表格结构：

<div class="table-container">
    <table id="myTable">
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
                <!-- 根据需要添加更多列 -->
            </tr>
        </thead>
        <tbody>
            <!-- 这里填充表格数据 -->
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
            </tr>
            <!-- 更多行 -->
        </tbody>
    </table>
</div>

### CSS 样式

接下来，我们添加CSS来固定表头，并设置一些基本的样式：

.table-container {
    overflow-y: auto;
    height: 300px; /* 根据需要设置高度 */
    display: block;
    width: 100%;
}

#myTable {
    width: 100%;
    border-collapse: collapse;
}

#myTable th, #myTable td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#myTable thead th {
    position: sticky;
    top: 0;
    background-color: #f9f9f9;
}

### JavaScript 动态调整

对于表格宽度的自动调整，由于我们已经将表格宽度设置为100%，它通常会根据容器宽度自动调整。但是，如果你需要更复杂的逻辑（例如，基于特定列内容的大小调整），你可能需要编写额外的JavaScript来动态计算宽度并应用它们。

这里是一个简单的示例，展示如何监听窗口大小变化并重新计算表格宽度（但在这个例子中，我们实际上不改变宽度，因为已经设置为100%）：

window.onresize = function() {
    // 在这里可以添加代码来动态调整表格宽度
    // 但由于我们已将表格宽度设置为100%，所以这里不执行任何操作
    // 如果需要基于内容调整列宽，则需要遍历表格并计算每列的宽度
    console.log('窗口大小已改变，但表格宽度已设置为100%，无需调整。');
};

请注意，如果你的表格列宽需要根据内容动态调整，并且你希望保持表头与表格体的列宽一致，那么你需要编写更复杂的逻辑来遍历表格列，计算内容宽度，并应用这些宽度到列上。这通常涉及到读取单元格的`scrollWidth`属性，并根据这些值设置列的宽度。但是，这可能会使HTML和CSS变得复杂，并且可能需要根据你的具体需求进行调整。

以上是一个基本的框架，你可以根据这个框架进一步开发和调整以满足你的具体需求。