html表格默认样式丑陋，必须用css设置border-collapse:collapse、font-family、line-height、padding、text-align和vertical-align等5项基础样式才能保证可读性。

HTML 表格本身不负责“精美”，真正起作用的是 CSS 样式；纯 <table> 标签默认丑得理直气壮，直接套用会得到一张带粗边框、文字挤在一起、毫无呼吸感的请假条。 <h3>为什么不能只写 </h3> <table> 就完事 <p>浏览器对 <code><table> 的默认渲染：单元格有 <code>border-collapse: separate、padding 为 0、字体小、行高紧、颜色灰暗。你看到的“难看”，不是你写错了，是它本来就这样。

• 不加 border-collapse: collapse → 表格内外全是双线缝
• 不设 padding → 文字贴着边框，像被墙挤扁了
• 不用 font-family 和 line-height → 中文显示发虚、行距窒息
• 忽略 text-align 和 vertical-align → “申请人”和名字左右不对齐、上下飘着

关键样式必须加这 5 条

下面这段 CSS 不是“可选美化”，而是让表格能正常阅读的底线配置。复制粘贴到 <style></style> 里就能立刻变样：

table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.6;
}
td, th {
  padding: 12px 16px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}

• border-collapse: collapse 是开关级设置，不加它，所有边框优化都白搭
• line-height: 1.6 比默认值（约 1.1）宽松得多，中文段落才不会糊成一片
• vertical-align: top 防止多行内容（比如请假事由）和单行项（如日期）错位对齐
• padding 值别用 10px 或 8px —— 太小没呼吸感；12px–16px 是视觉舒适区间

结构上别用 堆到底

一张可读的请假条，需要视觉分区：抬头、主体信息、签名栏。硬塞进一个大表格里，后期改样式、调间距、加横线都会卡住。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 把标题（如“员工请假条”）单独放一个 <h2></h2>，不要塞进 <td> <li>用多个小表：一个表放申请人/部门/日期，另一个表放事由/时间/备注，签名单独一行</li> <li>避免跨列（<code>colspan）滥用 —— 一旦要加边框或背景色，colspan 单元格容易漏边或错位
• 签名栏建议用 <div class="sign-line"></div> + CSS 画底线，比在 <td> 里敲一串 <code>______ 更可控

  打印时边框消失？加这条媒体查询

  很多单位要求打印纸质版，但 Chrome/Firefox 默认不打印背景色和部分边框 —— 你屏幕上看得好好的，打出来只剩文字。

  • 必须显式声明：@media print { table, td, th { border: 1px solid #000 !important; } }
  • 别依赖 background-color 做强调色，打印时大概率变灰或消失
  • 字号别小于 12px，否则打印后肉眼难辨；14px 是安全下限
  • 测试打印前，先用浏览器“打印预览”（Ctrl+P）看真实效果，别信页面渲染

  真正麻烦的从来不是怎么画格子，而是让“申请人”三个字和它右边的名字保持垂直居中、让“自 X 月 X 日至 X 月 X 日”这一行不换行撕裂、让手写签名位置留够 3 行空白——这些细节没有通用解法，得一行行调 padding、试 min-width、删空格、测打印。做一遍就知道，所谓“精美”，其实是把每处留白和对齐都亲手按住。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！