基于Semantic UI实现纯CSS固定表头，解决右侧空白问题

嘿，我太懂你折腾这个表格滚动的痛苦了——用Semantic UI的时候，想让tbody滚动但右侧总留着难看的空白，确实头疼！结合你提到的Electron只需要兼容新版浏览器的情况，我给你一套完美适配Semantic UI的解决方案：

问题根源 #

你之前用的那段CSS：

tbody, thead tr { display: block; } 
tbody { height: 100px; overflow-y: auto; overflow-x: hidden; }

之所以会出现右侧空白，核心原因是把tbody和thead tr改成display:block后，直接破坏了Semantic UI表格原本的列宽自动对齐机制——表格单元格默认的table-cell布局会自动均分宽度，但换成block后就完全失去了这个特性，导致表头和表体列宽严重不一致，最终留出空白。

完美适配的解决方案 #

我们要做的是在保留滚动功能的同时，手动同步表头和表体的列宽，并且完全不破坏Semantic UI的原有样式：

1. HTML结构（保留Semantic UI原生类）

给需要滚动的表格加一个自定义类（比如scrollable-table），避免影响其他正常表格：

<table class="ui celled table scrollable-table">
  <thead>
    <tr>
      <th>用户ID</th>
      <th>用户名</th>
      <th>注册时间</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里放入你的大量表格行内容 -->
  </tbody>
</table>

2. 调整后的CSS代码

/* 自定义滚动表格的基础样式 */
.scrollable-table {
  display: block;
  width: 100%; /* 确保表格占满容器宽度 */
}

/* 让表头和表体都以block布局，表头保持固定 */
.scrollable-table thead,
.scrollable-table tbody {
  display: block;
}

/* 设置表体的滚动属性 */
.scrollable-table tbody {
  height: 100px; /* 你需要的滚动高度，可按需修改 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 给滚动条预留稳定空间，避免最后一列被挡住（新版浏览器原生支持） */
  scrollbar-gutter: stable;
}

/* 关键：强制同步表头和表体的列宽 */
.scrollable-table thead th,
.scrollable-table tbody td {
  width: calc(100% / 3); /* 3列均分，根据你的实际列数修改分母 */
  box-sizing: border-box; /* 确保内边距和边框不占用额外宽度 */
}

进阶适配（结合Semantic UI列宽类） #

如果你已经在使用Semantic UI的列宽类（比如three wide column），可以直接用对应的比例设置宽度，更贴合Semantic的设计体系：

/* 比如3列分别是3/6/7宽（Semantic列宽总和为16） */
.scrollable-table thead th.three.wide,
.scrollable-table tbody td.three.wide {
  width: calc(3 / 16 * 100%);
}
.scrollable-table thead th.six.wide,
.scrollable-table tbody td.six.wide {
  width: calc(6 / 16 * 100%);
}
.scrollable-table thead th.seven.wide,
.scrollable-table tbody td.seven.wide {
  width: calc(7 / 16 * 100%);
}

为什么这招管用？ #

• 自定义类scrollable-table只作用于需要滚动的表格，不会污染其他Semantic UI表格的样式
• 用calc均分列宽，确保表头和表体的每一列宽度完全一致，彻底消除右侧空白
• scrollbar-gutter: stable是新版浏览器支持的属性，自动给滚动条预留空间，不用手动加padding（Electron新版完全兼容）

你把这段代码替换掉原来的那段CSS，调整一下列数对应的分母和tbody的高度，就能完美整合到你的Semantic UI项目里啦！

内容的提问来源于stack exchange，提问作者Indoor Picnic