shape-outside 不能作用于 <table> 元素，因其非浮动且计算显示类型为 table，不满足 CSS Shapes 对块级或内联级盒的要求；可行方案是用 div 容器设置 shape-outside 并嵌套表格。
shape-outside 不能作用于 <table> 元素——这是最直接的结论。浏览器目前不支持对 <table>、<tr>、<td> 等表格元素应用 shape-outside，因为它们默认不是浮动元素，且不符合 CSS Shapes 规范中对“可设置形状的浮动盒”的要求。
为什么 shape-outside 对表格无效
CSS Shapes 要求目标元素必须同时满足两个前提：
- 设置了
float（非none） - 是“块级盒”或“内联级盒”，但
<table>的计算显示类型是table，不属于 CSS Shapes 支持的盒类型（如block、inline-block、flex等） - 即使强行加
display: block和float: left，多数浏览器仍忽略shape-outside，控制台也不会报错，只是静默失效
替代方案：用 <div> 模拟圆形容器 + 表格内容
实际可行的做法是把表格内容放进一个支持 shape-outside 的容器里，例如 <div>：
- 给
<div>设置float: left、width/height、border-radius: 50% - 再用
shape-outside: circle(50% at 50% 50%)定义环绕路径 - 内部嵌套
<table>，并设width: 100%、height: 100%保持尺寸一致 - 注意：文字环绕的是
<div>的形状，不是表格本身；表格只是视觉内容载体
示例关键样式：
立即学习“前端免费学习笔记（深入）”；
div.table-circle {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
shape-outside: circle(50% at 50% 50%);
margin-right: 1rem;
}
div.table-circle table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
文字环绕效果不稳定？检查这些点
即使用了正确容器，环绕仍可能出问题：
-
shape-outside只影响**后续的行内内容**（如段落文本），对其他浮动元素或绝对定位元素无效 - 确保文字内容是普通流内
<p>或<span>，不是被overflow: hidden或contain: layout截断的父容器内部 - Chrome 和 Safari 支持较好，Firefox 对
shape-outside的circle()支持完整，但旧版 Edge 已废弃，无需兼容 - 如果圆形区域有背景色或边框，记得加
background或border，否则只“绕空”，看不出形状
真正要实现文字绕圆排版，核心不是“让表格变形状”，而是“用形状容器包裹表格”。表格本身永远是矩形盒，这是 HTML 语义和渲染引擎决定的，绕不开。
