<table>默认display为table，属表格显示上下文，虽独占一行、支持宽高和内外边距而看似块级，但内部仍受表格布局引擎控制；设为block后退化为普通容器，子元素失去表格渲染逻辑，导致布局错乱。
直接用 display: block 就能将 <table> 变成块级元素，但要注意它会破坏表格语义和内部盒模型行为——比如单元格不再自动均分宽度、colgroup 失效、border-collapse 不再起作用。
为什么 table 默认不是块级却表现像块级？
<table> 的默认 display 值是 table，属于「表格显示上下文」，它本身在文档流中确实独占一行、可设宽高、支持 margin/padding，看起来像块级，但内部渲染逻辑完全不同。强行设为 block 后，它就退化成一个普通容器，子元素（<tr>、<td>）不再受表格布局引擎控制，会按普通块/行内规则排列，结果往往错乱。
display: block 对 table 元素的实际效果
设 display: block 后：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<table>自身变成普通块盒：可设width、height、margin、padding -
<tr>变成普通块元素（默认display: block），垂直堆叠，每行占满父宽 -
<td>也变成块元素，内容左对齐、不自动等宽，text-align仍有效但vertical-align失效 - 原表格边框、间距、列宽控制全部失效；
colspan/rowspan语义保留但渲染无意义
更稳妥的替代方案：display: table 而非 block
如果目标只是让某个非表格元素（如 <div> 或 <span>）获得类似表格的块级行为，该用 display: table；但如果已经是个 <table>，通常没必要改 display —— 它本来就是块级参与流布局的。真要“转块级”，常见真实需求其实是：
立即学习“前端免费学习笔记（深入）”；
- 让表格居中：
margin: 0 auto（无需改display） - 让表格响应式缩放：
width: 100%+overflow-x: auto包裹容器 - 让表格内容可选中/复制时更可控：加
user-select: text，而非动display - 需要完全自定义布局时：别用
<table>，改用div+display: grid或flex
容易被忽略的兼容性坑
某些旧版 Safari（≤15.4）对 display: block 下的 <table> 子元素解析异常，<tbody> 可能被忽略；IE 完全不支持 display: table 系列值以外的表格相关显示模式。真正需要打破表格布局时，优先考虑结构重构，而不是硬切 display 值。
