当页面中存在宽于视口的动态表格时，固定定位的导航栏无法自动匹配表格实际宽度，导致横向滚动时出现错位；本文提供纯 css 与 javascript 双方案，实现导航栏宽度与表格容器实时同步。
在响应式数据表格场景中（如后台管理系统的列动态扩展表），常遇到一个典型布局问题：导航栏（.topnav）使用 position: sticky 或 fixed 实现顶部固定，但其宽度默认基于初始视口（100vw）计算；而表格因列数增加不断向右延伸，超出视口后需横向滚动——此时导航栏仍保持原始宽度，与表格内容产生明显错位，破坏视觉一致性与交互体验。
根本原因分析
原代码中 .topnav 设置了 width: 100vw 和 position: sticky，这使其宽度严格绑定浏览器窗口宽度，而非其兄弟或父级容器的实际渲染宽度。而 .table-container 内部表格通过 white-space: nowrap 和动态列渲染持续扩大，其真实宽度由内容撑开（可能远超 100vw）。CSS 本身无法让 sticky 元素自动继承非父级、非流式容器的动态宽度，因此必须借助 JavaScript 获取真实渲染尺寸并主动同步。
推荐解决方案：JavaScript 动态宽度同步
最可靠且兼容性良好的方式是利用 getComputedStyle() 获取表格容器的实际渲染宽度，并赋值给导航栏：
<!-- 在 body 结束前添加 -->
<script>
function syncNavbarWidth() {
const tableContainer = document.getElementById('tableWidth');
const navbar = document.getElementById('navWidth');
if (!tableContainer || !navbar) return;
// 获取计算后的精确宽度（含单位）
const computedStyle = window.getComputedStyle(tableContainer);
const tableWidth = computedStyle.width;
// 应用到导航栏（注意：需确保 navbar 为 relative/fixed/sticky 定位才生效）
navbar.style.width = tableWidth;
}
// 页面加载完成后执行一次
window.addEventListener('load', syncNavbarWidth);
// 可选：监听窗口大小变化（如用户缩放、响应式切换）
window.addEventListener('resize', () => {
// 延迟执行避免频繁触发
setTimeout(syncNavbarWidth, 100);
});
</script>同时，更新 HTML 结构，为关键元素添加 ID 并启用 .table-container：
<div class="topnav" id="navWidth">
<a href="{{ url_for('index') }}">Section 1</a>
<a class="active" href="{{ url_for('show_table') }}">Section 2</a>
<a href="{{ url_for('admin') }}">Section 3</a>
</div>
<div class="table-container" id="tableWidth">
<table border="1" class="table table-striped" style="max-width:100%; white-space:nowrap;">
<!-- 表格内容保持不变 -->
</table>
</div>并在 CSS 中移除 width: 100vw，改用 min-width: 100% 作为兜底，并确保定位行为稳定：
.topnav {
overflow: hidden;
background-color: #333;
display: flex;
min-width: 100%; /* 兜底：至少占满初始视口 */
position: sticky;
top: 0;
z-index: 1000; /* 确保不被表格内容遮挡 */
}
.table-container {
width: 100%;
overflow-x: auto; /* 显式启用横向滚动 */
}替代方案：CSS-only（适用于已知最大宽度场景）
若业务中表格宽度有明确上限（例如最多 50 列，每列最小 180px → 最大宽 ≈ 9000px），可采用 min-width 配合 position: fixed：
.topnav {
position: fixed;
top: 0;
left: 0;
right: 0;
min-width: 9000px; /* 设为预估最大宽度 */
z-index: 1000;
}⚠️ 注意：该方式会强制水平滚动条始终存在，且无法精准适配动态列数，仅建议用于宽度可预测的静态场景。
关键注意事项
- ID 必须唯一：确保 id="navWidth" 和 id="tableWidth" 在页面中仅出现一次；
- 执行时机：window.load 确保 DOM 与表格内容完全渲染后再读取宽度；
- 响应式兼容：若表格支持列拖拽/折叠等交互，应在操作后手动调用 syncNavbarWidth()；
- 性能优化：避免在 scroll 事件中直接调用（易造成卡顿），resize 事件也应节流处理；
- 无障碍补充：为 .topnav 添加 role="navigation" 提升语义化支持。
通过上述方案，导航栏将始终与表格容器保持视觉对齐，无论用户如何横向滚动或缩放页面，均能提供专业、一致的 UI 体验。
