直接用 transform: rotate() 倾斜整个 table 元素是最简单兼容的方式（ie10+），需设 display: block、transform-origin: center，并注意 overflow 裁剪和布局异常。
用 transform: rotate() 直接倾斜整个 <table> 元素
<p>HTML 表格本身不支持原生倾斜属性，但你可以把 <code><table> 当作一个普通块级元素，用 CSS 的 <code>transform: rotate() 整体旋转。这是最直接、兼容性最好的方式（IE10+ 支持）。
注意：倾斜后表格内容也会跟着歪，如果只是想让边框或背景“看起来斜”，而文字保持正立，这个方案就不适用——得拆开处理（见下一条）。
- 必须给
<table> 设置 <code>display: block或明确宽高，否则transform在部分浏览器中可能表现异常（尤其 Safari 对 inline-table 的 rotate 支持不稳定） - 推荐加
transform-origin: center控制旋转中心点，避免偏移出视口 - 若父容器有
overflow: hidden，倾斜后边缘可能被裁剪，需要预留足够 padding 或调整margin
| A | B |
| C | D |
只倾斜边框/背景，文字保持正立
如果目标是“视觉上斜着的表格框线”，但单元格文字仍要水平可读，就不能直接 rotate 整个 table。得用伪元素或额外 wrapper 模拟斜边框。
常见做法：用 ::before 或 ::after 在 table 外层画一个倾斜的 border 框，table 本体保持正常。
- 给 table 外层加一个
<div class="tilted-frame">，对 div 应用 <code>rotate，table 放在内部且不旋转 - 利用
border+clip-path或linear-gradient绘制斜线边框，适合纯装饰性需求 - 注意 z-index 和 stacking context：伪元素默认层级低于 table 内容，必要时加
z-index: -1或调整position
<div style="transform: rotate(-3deg); display: inline-block;"> <table style="transform: rotate(3deg);"><tr><td>正立文字</td></tr></table> </div>
表格内容局部倾斜（比如某列标题）
有时只需要表头或某几列倾斜（类似 Excel 的斜表头），这时不要动整个 table，而是单独选中 <th> 或 <code><td> 加 transform。
<p>关键点在于：倾斜后单元格尺寸会变，容易撑破布局，需配合 <code>white-space: nowrap 和固定 width / height 控制。
-
transform: rotate(-45deg)后，文字宽度方向变成对角线长度，实际占用空间远大于原始宽度 - 建议用
transform-origin: top left配合position: relative微调位置，避免重叠 - 移动端慎用大角度倾斜，小屏幕下易导致文字不可读或溢出
<th style="transform: rotate(-45deg); transform-origin: top left; width: 80px; height: 80px; white-space: nowrap;">销量</th>
IE 低版本兼容问题（transform 不生效）
IE9 及以下不支持 transform，如果必须兼容，只能用滤镜（filter: progid:DXImageTransform.Microsoft.Matrix），但写法复杂、精度差、性能低。
现实项目中更可行的方案是：放弃 IE9– 或降级为无倾斜效果（用 @supports 判断）。
- IE10+ 支持标准
transform，但需加-ms-transform前缀（仅 IE10） - 不要用
filter模拟 rotate，它会让文字锯齿严重，且无法和现代 CSS 组合使用 - 若必须支持老 IE，考虑用 Canvas 或 SVG 重绘表格——但这已不是“HTML 表格倾斜”，而是彻底换技术栈
真正难的不是怎么写那几行 rotate，而是想清楚：倾斜到底是为了视觉装饰、信息强调，还是响应式适配？不同目标对应完全不同的实现路径。没想清这点，代码写得再工整也容易返工。
