如何让表格单元格mapCell内容随滚动固定在窗口顶部？

当前需求是页面滚动时，让表格单元格mapCell内的所有内容（包括SVG地图和下载按钮）固定在可视窗口顶部，但现有设置仅让map元素的底部卡在页面顶部，下载按钮无法跟随固定。

修改后的代码实现 #

CSS 代码

#mapCell {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  vertical-align: top;
  min-width: 492.883px;
  background: #fff; /* 防止滚动时内容穿透，可选但推荐 */
}

HTML 代码（修正了标签闭合问题）

<table border="1" width="100%" class="bottomTable">
  <tr>
    <td id="resultsCell">
      <table class="resultsTable" id="resultsTable"></table>
    </td>
    <td id="mapCell">
      <object id="map" class="mapClass">
          <!-- SVG image -->
       </object>
      <br>
      <button id="download">Download Map</button>
    </td>
  </tr>
</table>

关键说明 #

• 原代码把sticky定位加在了#map单个元素上，导致只有地图尝试固定，且表格布局会限制其表现，下载按钮不在定位范围内自然无法跟随。
• 直接给#mapCell单元格设置sticky定位，就能让整个单元格内的所有内容一起固定在视窗顶部。
• 添加白色背景是为了避免滚动时下方的表格内容穿透固定区域，保证视觉清晰。
• 修正了原HTML中未闭合的<td>标签，避免布局错乱。

内容的提问来源于stack exchange，提问作者Squeaky Fox