Bokeh编辑DataTable出现垂直滚动条的原因及消除方法

滚动条异常出现是配置冲突加Bokeh DataTable默认渲染逻辑共同导致的：

• 宽度配置冲突：你同时设置了固定width=60和autosize_mode='fit_columns'，静态渲染时表格会按60px宽度适配列，但进入编辑状态后，单元格内会生成输入框，输入框自带的边框、内边距会让实际内容宽度比容器宽2-6px，直接触发水平滚动条。
• 高度配置逻辑不符预期：height_policy='fit'的作用是让组件高度适配父容器，而非适配表格自身的内容高度。DataTable默认对表格体设置了最小高度兜底，编辑状态下输入框的高度比普通文本高1-2px，会超出组件初始计算的高度；加上你设置了index_position=None隐藏索引列，部分Bokeh版本计算高度时不会扣除这部分的冗余占位，几像素的高度差就会触发垂直滚动条。

补充：Bokeh 2.x版本的fit高度策略本身存在已知bug，可编辑表格场景下固定会少算4px容器高度，垂直滚动条出现概率极高；3.x版本修复了大部分高度计算bug，但可编辑单元格的输入框边距溢出问题依然存在。

按以下顺序调整，可彻底移除多余滚动条：

• 第一步：修正宽高配置
  删掉height_policy='fit'，替换为height_policy='auto'；把固定宽度width=60替换为min_width=60，同时将autosize_mode从fit_columns调整为fit_viewport，强制列宽严格贴合容器尺寸，编辑状态下不会撑大内容区域。如果你的表格行数固定，可以直接显式指定height值，按「表头高度30px + 单行高度25px * 行数」计算即可，比如3行数据就设置height=105，从根源避免高度计算误差。
• 第二步：样式兜底（如果第一步调整后编辑时仍有滚动条）
  给DataTable传入参数css_classes=["hide-excess-scroll"]，添加自定义CSS强制隐藏无意义的滚动条：

.hide-excess-scroll .slick-viewport {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

该样式只作用于表格的滚动容器，只要内容本身完全可见，就不会显示多余滚动条，也不会截断正常显示的内容。

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