默认display为table，属表格显示上下文，虽独占一行、支持宽高和内外边距而看似块级，但内部仍受表格布局引擎控制；设为block后退化为普通容器，子元素失去表格渲染逻辑，导致布局错乱。
直接用 display: block 就能将 <table> 变成块级元素，但要注意它会破坏表格语义和内部盒模型行为——比如单元格不再自动均分宽度、<code>colgroup 失效、border-collapse 不再起作用。
为什么 table 默认不是块级却表现像块级？
<table> 的默认 <code>display 值是 table，属于「表格显示上下文」，它本身在文档流中确实独占一行、可设宽高、支持 margin/padding，看起来像块级，但内部渲染逻辑完全不同。强行设为 block 后，它就退化成一个普通容器，子元素（<tr>、<code><td>）不再受表格布局引擎控制，会按普通块/行内规则排列，结果往往错乱。
<h3>display: block 对 table 元素的实际效果</h3>
<p>设 <code>display: block 后：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<table> 自身变成普通块盒：可设 <code>width、height、margin、padding<tr> 变成普通块元素（默认 <code>display: block），垂直堆叠，每行占满父宽<td> 也变成块元素，内容左对齐、不自动等宽，<code>text-align仍有效但vertical-align失效- 原表格边框、间距、列宽控制全部失效；
colspan/rowspan语义保留但渲染无意义 - 让表格居中：
margin: 0 auto（无需改display） - 让表格响应式缩放：
width: 100%+overflow-x: auto包裹容器 - 让表格内容可选中/复制时更可控：加
user-select: text，而非动display - 需要完全自定义布局时：别用
<table>，改用 <code>div+display: grid或flex容易被忽略的兼容性坑
某些旧版 Safari（≤15.4）对
display: block下的<table> 子元素解析异常，<code><tbody> 可能被忽略；IE 完全不支持 <code>display: table系列值以外的表格相关显示模式。真正需要打破表格布局时，优先考虑结构重构，而不是硬切display值。
更稳妥的替代方案：display: table 而非 block
如果目标只是让某个非表格元素（如 <div> 或 <code><span></span>）获得类似表格的块级行为，该用 display: table；但如果已经是个 <table>，通常没必要改 <code>display —— 它本来就是块级参与流布局的。真要“转块级”，常见真实需求其实是：
