position: fixed 属性会将元素从正常的文档流中移除，并相对于视口（viewport）进行定位。这意味着无论页面如何滚动，该元素都会保持在屏幕上的固定位置。

实现步骤

1. HTML结构调整

首先，我们需要修改目标单元格的HTML结构，将需要固定显示的文本内容用一个 标签包裹起来，并为其添加一个特定的类名，例如 fixed-column。

<!-- 修改前: <td>left data</td> -->
<!-- 修改后: -->
<td><span class="fixed-column">left data</span></td>

2. CSS样式定义

接下来，为新添加的 fixed-column 类定义CSS样式。关键在于设置 position: fixed 和一个合适的定位值，例如 top: 50%，使其在垂直方向上大致居中显示。

.fixed-column {
    position: fixed;
    top: 50%; /* 将元素的顶部边缘定位在视口高度的50%处 */
    /* 
       为了实现真正的垂直居中，可以结合 transform 属性：
       top: 50%;
       transform: translateY(-50%);
       但这取决于具体需求，如果仅需大致居中，top: 50% 即可。
    */
    background-color: white; /* 可选：为固定文本提供背景，防止与下方内容重叠时不可读 */
    padding: 5px; /* 可选：增加内边距 */
    border-radius: 3px; /* 可选：圆角 */
    z-index: 100; /* 可选：确保固定元素位于其他内容之上 */
    /* width: auto; 或固定宽度，根据内容调整 */
    /* left: 10px; 或其他水平定位，根据实际布局调整 */
}

通过以上修改，left data 文本将脱离表格的滚动行为，始终固定在屏幕的垂直中心位置。

3. 完整代码示例

将上述HTML和CSS修改整合到原有代码中，形成完整的解决方案。

系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

HTML:

<div class="container">
  <table id="myTable">
    <thead>
      <tr>
        <th>left header</th>
        <th>right header</th>
      </tr>
    </thead>
    <tbody id="myTbody">
      <tr id="myTr">
        <td><span class="fixed-column">left data</span></td>
        <td>right data</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

div.container {
  height: 500px;
  overflow-y: auto;
}

#myTable {
  width: 300px;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: lightsteelblue;
}

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

#myTable th,
#myTable td {
  border: 1px solid black;
  padding: 10px;
}

.fixed-column {
    position: fixed;
    top: 50%;
    /* transform: translateY(-50%); */ /* 可选：实现完美垂直居中 */
    background-color: white; /* 确保文本可见 */
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000; /* 确保在最上层 */
    left: 20px; /* 根据实际布局调整，使其不遮挡其他内容 */
}

J*aScript (保持不变):

const myTbody = myTable.getElementsByTagName("tbody")[0];
const myTr = document.getElementById("myTr");
const firstTd = myTr.children[0];

for (const i of [...Array(100).keys()]) {
  const td = document.createElement("td");
  td.textContent = `right data${i}`;

  const tr = document.createElement("tr");
  tr.appendChild(td);

  myTbody.appendChild(tr);
  firstTd.rowSpan = Number(firstTd.rowSpan) + 1;
}

注意事项与优化

1. position: fixed 的特性:

   • position: fixed 元素脱离文档流，不占据空间。这可能导致其原始位置的父元素收缩，但对于包裹在 内的 而言， 仍然占据其应有的空间，只是 自身被移走了。
   • 它相对于视口定位，因此不会随任何滚动容器（包括 div.container）的滚动而移动，只会随整个浏览器窗口的滚动而移动。

   • 定位与居中:

     • top: 50% 将元素的顶部边缘定位在视口高度的50%处。如果需要更精确的垂直居中，应结合 transform: translateY(-50%) 使用，这样元素的中心点才会在视口高度的50%处。
     • 水平定位（如 left 或 right）也需要根据实际设计进行调整，确保固定内容不会遮挡其他重要信息。

   • 层级管理 (z-index):

     • 由于 position: fixed 元素脱离了文档流，它可能会覆盖其他内容。使用 z-index 属性可以控制其堆叠顺序，确保它始终显示在最上层（或适当的层级）。

   • 背景与可读性:

     • 固定文本下方的内容会随着表格滚动而变化。为了保证文本始终清晰可读，建议为 fixed-column 元素设置一个背景色，如 background-color: white;。

   • 动态内容与响应式:

     • 如果固定显示的内容长度或高度是动态变化的，top: 50% 可能需要配合 J*aScript 动态计算或使用 transform: translateY(-50%) 来确保在各种情况下都能正确居中。
     • 在响应式设计中，固定元素的位置和大小可能需要根据屏幕尺寸进行调整。

   总结

   通过将表格中需要固定显示的文本内容封装在一个具有 position: fixed 属性的 元素中，我们可以有效地解决大型可滚动表格中内容被隐藏的问题。这种方法简单而强大，能够确保关键信息始终在用户视野中，极大地提升了数据密集型表格的用户体验。在实际应用中，我们应根据具体需求，合理设置定位、层级和背景样式，以达到最佳的视觉效果和功能表现。