HTML表格如何设置只有横线没有竖线的简约风格-html教程-PHP中文网

直接设 rules="rows" 不可靠，因 chrome/safari 将其解释为“内侧+外侧边框”，导致顶部/底部外框意外出现且竖线未完全隐藏；html5 已弃用该属性，应改用 border-collapse: collapse 配合 border-top/border-bottom 精确控制横线，同时清除左右边框。

html表格如何设置只有横线没有竖线的简约风格

为什么直接设 `rules="rows"` 不可靠

很多人试过在 <table rules="rows"> 上直接加这个属性，结果发现 Chrome 和 Safari 里顶部、底部外框也跟着出来了，甚至竖线没完全消失。这不是浏览器 bug，而是 HTML5 规范已明确不推荐 <code>rules 属性后的兼容实现差异——它在现代浏览器里语义模糊，行为不可控。

真正起作用的是 CSS，不是 HTML 属性。必须放弃 rules，转而用 border-collapse: collapse + 精确控制单边边框。

`border-bottom` + `border-top` 是最稳的写法

核心思路：只给单元格画上边和下边，左右边全清零。这样横线由相邻行的 border-bottom 和下一行的 border-top 共同构成（合并后为一条），竖线则彻底不存在。

给所有 td 和 th 设 border-bottom: 1px solid #e0e0e0
给第一行（thead th 或 tr:first-child td）额外加 border-top: 1px solid #e0e0e0
必须同时设 table { border-collapse: collapse }，否则上下边框会双倍粗
显式清除左右边框：border-left: none; border-right: none，避免继承干扰

示例片段：

table {
  border-collapse: collapse;
}
td, th {
  border-bottom: 1px solid #e0e0e0;
  border-left: none;
  border-right: none;
}
thead th,
tr:first-child td {
  border-top: 1px solid #e0e0e0;
}

嵌套表格或响应式场景下容易漏掉的点

如果表格里嵌了另一个 <table>，外层的 CSS 不会穿透影响内层。每个表格都得单独加 <code>border-collapse: collapse，且内层单元格的左右边框也要重置。

移动端缩放时，1px 边框可能被渲染成 2px（Retina 屏），建议用 border-bottom: 0.5px solid #e0e0e0 或媒体查询微调。

Claude风格HTML汇报文件

生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid

下载

如果用了 colgroup 或 col 控制列宽，它们不接受边框样式，所有边框控制仍得落在 td/th 上。