css 固定表头 拖动滚动条时对应表头所对应的列 ie6测试通过

要实现CSS固定表头并支持拖动滚动条时，对应表头所对应的列可以通过一些技巧实现，以下是攻略：

一、HTML结构

首先要构建具有类似表格结构的HTML代码，其中包含固定的表头和可滚动的内容区域。可以采用如下结构实现：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>表头列1</th>
        <th>表头列2</th>
        <th>表头列3</th>
        <th>表头列4</th>
        <!-- 其他表头列 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容行1-列1</td>
        <td>内容行1-列2</td>
        <td>内容行1-列3</td>
        <td>内容行1-列4</td>
        <!-- 其他内容行1 -->
      </tr>
      <tr>
        <td>内容行2-列1</td>
        <td>内容行2-列2</td>
        <td>内容行2-列3</td>
        <td>内容行2-列4</td>
        <!-- 其他内容行2 -->
      </tr>
      <!-- 其他内容行 -->
    </tbody>
  </table>
</div>

二、CSS样式

接下来需要对HTML元素应用CSS样式来实现表格的固定表头和滚动，可以参考以下示例代码：

/* 设置表格容器样式，包含滚动条 */
.table-container {
  position: relative;
  height: 200px;
  overflow: auto;
  margin: 0;
  padding: 0;
}

/* 设置表格样式，包括表格边框、行间距和单元格填充 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 设置表头和内容区域的样式 */
thead, tbody {
  display: block;
}

/* 设置表头样式，包括背景色、边框、文字居中 */
thead {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  position: absolute;
  top: 0;
  left: 0;
}

/* 设置表头中每列的样式 */
th {
  padding: 8px 10px;
  text-align: left;
}

/* 设置内容区域单元格的样式 */
td {
  border-bottom: 1px solid #ddd;
  padding: 8px 10px;
  text-align: left;
}

三、JavaScript实现

最后需要使用JavaScript来实现表格的重绘和事件绑定，具体步骤如下：

1. 在DOM加载完毕后，获取表格容器、表格元素、表头元素和内容区域元素；
2. 计算表头每列的宽度，并将其赋值给内容区域中对应列的每个单元格；
3. 监听表格容器的滚动事件，更新表头的滚动位置，实现表头和内容区域的同步滚动。

示例代码如下：

// 获取DOM元素
var tableContainer = document.querySelector('.table-container');
var table = document.querySelector('table');
var tableHead = table.querySelector('thead');
var tableColumns = tableHead.querySelectorAll('th');
var tableBody = table.querySelector('tbody');
var tbodyCells = tableBody.querySelectorAll('td');

// 计算表头每列宽度
for (var i = 0; i < tableColumns.length; i++) {
  var width = window.getComputedStyle(tableColumns[i]).width;
  tbodyCells[i].style.width = width;
}

// 监听滚动事件，更新表头滚动位置
tableContainer.addEventListener('scroll', function() {
  var transform = 'translateY(' + this.scrollTop + 'px)';
  tableHead.style.transform = transform;
});

至此，总体攻略已经完成。其中，示例代码只是实现固定表头和同步滚动的核心代码，实际应用中还需要根据具体情况进行进一步的优化和实现。