直接对使用transform: rotate(-45deg)后文字被裁剪，根本原因是transform不改变文档流且父容器默认overflow: hidden；需设overflow: visible（含所有祖先元素）、调整transform-origin、配合white-space: nowrap、显式设置高度或宽高预留空间，并注意浏览器差异与响应式降级。
transform 旋转表头后文字被裁剪怎么办
直接对 <th> 使用 <code>transform: rotate(-45deg) 后，文字常被父容器或表格边框截断——根本原因是 transform 不改变文档流，但默认 overflow: hidden（尤其在 <table> 或 <code><thead> 上）会裁掉超出区域的内容。
<ul><li>给 <code><th> 设置 <code>overflow: visible（注意：需同时确保其所有祖先元素，包括 <thead>、<code><table> 也设为 <code>visible）
transform-origin: bottom left 控制旋转基点，避免文字飞出可视区太远white-space: nowrap 防止换行干扰旋转效果<th> 的 <code>width 和 height，或用 min-width/min-height 预留空间
旋转后单元格高度塌陷导致内容重叠
旋转后的 <th> 视觉高度变大（对角线长度），但原始盒模型仍按未旋转尺寸计算行高，导致下方 <code><td> 上移、文字压在一起。
<ul><li>给 <code><thead> 的 <code><tr> 显式设置足够大的 <code>height（例如 height: 120px），而非依赖内容撑开
<th> 使用 <code>position: relative + top 微调垂直位置，避开下方内容
line-height 拉高 —— 它对 rotated 元素的布局影响不可预测不同浏览器下 rotate(-45deg) 渲染偏移不一致
Chrome 和 Firefox 对 transform-origin 的解析略有差异，尤其当 <th> 内有 padding 或 border 时，旋转中心点实际位置可能偏移，造成表头错位。
<ul>
<li>统一用 <code>transform-origin: center 或明确像素值（如 transform-origin: 16px 16px）替代 bottom left
<th> 的 <code>padding，改用内部 <div> 包裹文本并设 padding，隔离 transform 影响范围
<li>加 <code>backface-visibility: hidden 可缓解部分 Safari 的模糊/抖动问题响应式场景下旋转表头失效或溢出屏幕
固定角度旋转在小屏上极易导致表头宽度爆炸式增长，横向滚动或撑破容器。
- 用媒体查询降级：小屏下取消旋转，改用
writing-mode: vertical-rl（更轻量且原生支持竖排） - 若必须用
transform，可动态调整角度（如rotate(-30deg)），或结合scale()缩小字体补偿宽度 - 绝对不要对整个
<table> 套 <code>transform—— 会破坏所有单元格定位逻辑真正麻烦的是跨列表头（
colspan）旋转后对齐难，得靠额外 wrapper 和负 margin 手动调，这时候不如考虑用 Canvas 或 SVG 绘制表头——HTML 表格不是为斜向设计的。
