<div class="table-container"><table id="my-table"><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Fixed</td><td>Data 1</td><td>Data 2</td></tr><tr><td>Fixed</td><td>Data 3</td><td>Data 4</td></tr></tbody></table><table><thead><tr><th>Header 1</th></tr></thead><tbody><tr><td>Fixed</td></tr><tr><td>Fixed</td></tr></tbody></table></div> 实现拖动父级滚动条超出100像素固定表格下所有的第一列td包含内容以及他的样式不是只固定第一列的文本 实例

如果您想要在滚动时固定表格下的所有第一列单元格，包含它们的内容和样式，可以使用以下方法：

1. 将表格分成两个部分，左边是固定的第一列，右边是可滚动的其余部分。

2. 使用 CSS 将左侧固定列设置为固定宽度，并将其放置在右侧滚动部分的左侧。

3. 使用 JavaScript 监听父级容器的滚动事件，并根据滚动距离调整左侧固定列的位置。

4. 当滚动距离超过100像素时，将左侧固定列的位置设置为固定在表格中。

以下是示例代码，可以根据需要进行修改：

HTML 代码：

<div class="table-container">
  <div class="fixed-column-container">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Fixed</td>
        </tr>
        <tr>
          <td>Fixed</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="scrollable-column-container">
    <table id="my-table">
      <thead>
        <tr>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
        </tr>
        <tr>
          <td>Data 3</td>
          <td>Data 4</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS 代码：

.table-container {
  overflow-x: auto;
  max-width: 100%;
}

.fixed-column-container {
  position: absolute;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.fixed-column-container table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed-column-container th,
.fixed-column-container td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

.scrollable-column-container {
  margin-left: 100px;
  overflow-x: auto;
  width: auto;
}

#my-table {
  border-collapse: collapse;
  width: 100%;
}

#my-table th,
#my-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ccc;
}

JavaScript 代码：

var fixedColumnContainer = document.querySelector(".fixed-column-container");
var fixedColumnTable = fixedColumnContainer.querySelector("table");
var fixedColumnCells = fixedColumnTable.querySelectorAll("td");

fixedColumnContainer.style.width = fixedColumnTable.offsetWidth + "px";

var scrollableColumnContainer = document.querySelector(".scrollable-column-container");
var scrollableColumnTable = document.getElementById("my-table");

scrollableColumnContainer.addEventListener("scroll", function () {
  var scrollLeft = this.scrollLeft;

  if (scrollLeft > 100) {
    fixedColumnContainer.style.position = "fixed";
    fixedColumnContainer.style.left = "0";
  } else {
    fixedColumnContainer.style.position = "absolute";
    fixedColumnContainer.style.left = scrollLeft + "px";
  }

  for (var i = 0; i < fixedColumnCells.length; i++) {
    fixedColumnCells[i].style.left = -scrollLeft + "px";
  }
});

这种方法会将表格分成两部分，并在滚动时固定左侧的第一列单元格，包含它们的内容和样式。但是，这种方法可能会影响表格的布局和响应性，因此您应该根据实际情况进行修改。