常用HTML圆角边框表格的排版实现代码-html教程-PHP中文网

table设置圆角边框必须配合border-collapse: collapse，否则border-radius无效；核心方案是table加border-radius、overflow: hidden和border，同时td/th设border: none以避免直角破坏圆角视觉效果。

常用html圆角边框表格的排版实现代码

table 设置圆角边框必须配合 border-collapse

直接给 table 加 border-radius 是无效的，因为默认 border-collapse: separate 下，圆角会被子元素（如 td、th）的边框切割。必须先设 border-collapse: collapse，再统一控制外层边框。

border-collapse: collapse 让表格边框合并为单一线条，border-radius 才能作用于整个表格容器
所有单元格的 border 应设为 none 或透明，否则内边框会破坏圆角视觉效果
若需保留内部细线分隔，改用 border-bottom 和 border-right 单独加在 td/th 上，避开四角

最简可用的圆角表格 CSS 写法

以下代码适用于现代浏览器（Chrome 80+、Firefox 75+、Safari 14+），不依赖 JS 或额外 wrapper：

table.rounded {
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden; /* 关键！裁掉溢出的直角部分 */
  border: 2px solid #ccc;
}
<p>table.rounded th,
table.rounded td {
border: none; /<em> 禁用单元格默认边框 </em>/
padding: 12px 16px;
}</p><p>table.rounded th {
background-color: #f5f5f5;
font-weight: 600;
}</p>

注意：overflow: hidden 不可省略——它才是真正让圆角“生效”的视觉保障，否则圆角只影响盒模型，不裁剪内容。

IE11 或旧版 Safari 需要 wrapper hack

IE11 完全不支持 table 元素的 border-radius，即使加了 overflow: hidden 也无效。此时必须套一层 div 并把圆角和边框移到 wrapper 上：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

<div class="table-wrapper">
  <table>...</table>
</div>

.table-wrapper 样式：

.table-wrapper {
  border-radius: 8px;
  border: 2px solid #ccc;
  overflow: hidden;
}
<p>.table-wrapper table {
border-collapse: collapse;
width: 100%;
margin: 0;
}</p>