权限矩阵排版问题需组合解决设word-break/overflow-wrap换行、min-width替代固定宽、sticky冻结列对齐、导出前映射布尔值为中文并防格式错乱。权限矩阵表格太挤td 内容换行失效怎么办直接设 white-space: normal 不顶用是因为多数权限矩阵用了 table-layout: fixed 或带 width 的列约束强制截断。真正起效的是组合控制给 th 和 td 同时加 word-break: break-word兼容老版 Chrome/Firefox和 overflow-wrap: break-word标准写法去掉列的固定 width改用 min-width比如 min-width: 120px让内容撑开但不无限拉伸如果用了 table-layout: fixed必须配合 width: 100% 在 table 上否则列宽计算会错乱权限开关按钮堆在单元格里点击区域小、易误触不是加个 padding 就完事——真实问题是按钮常被包裹在 div 或 span 里外层没设 display: block导致点击热区只覆盖文字部分。把开关控件如 input[typecheckbox] 或自定义 Toggle 组件的父容器设为 display: flex并加 align-items: center 垂直居中给父容器设 padding: 4px 8px再用 cursor: pointer 明确可交互态避免用 label 包裹 checkbox 却忘了加 for 或 htmlFor否则点击 label 文字不会触发用户角色列和权限操作列对不齐横向滚动时错位这是固定表头 滚动表格的经典坑角色列左侧冻结和权限列右侧滚动用了不同套 CSS 计算逻辑尤其当有 border-collapse: collapse 和 border-spacing 混用时像素级偏移立刻暴露。冻结列统一用 position: sticky 替代 position: absolute左边界设 left: 0同时确保父容器 overflow-x: auto 且无 transform所有 th/td 必须显式声明 box-sizing: border-box避免 padding/border 叠加引发宽度误差禁用 border-collapse: collapse改用 border-collapse: separate border-spacing: 0更可控导出 Excel 后权限状态变成 TRUE/FALSE不是“已开启”“已禁用”前端展示用中文但后端吐给表格的数据源仍是布尔值导出逻辑没做映射转换。Excel 渲染器如 xlsx 库原样输出 JS 值不会读取 CSS 或 data-* 属性。 HIX.AI HIX.AI是一个多功能的一体化AI写作助手集成了120多种AI写作工具支持50多种语言能够满足各种写作需求。