正确表格结构必须用语义化标签，而非css模拟；需规范使用、闭合、合理设置border-collapse、padding及响应式overflow-x: auto；推荐datatables或tabulator处理复杂交互。
表格结构必须用 <table>、<code><thead>、<code><tbody> 搭配，不能只靠 <code><div>
<p>纯 CSS Grid 或 Flex 布局做“假表格”在语义和可访问性上会出问题——屏幕阅读器读不出行列关系，Excel 导入也容易错乱。真正漂亮的表格，前提是结构正确。</p>
<p>正确写法示例：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table>
<thead><tr>
<th>姓名</th>
<th>部门</th>
<th>入职时间</th>
</tr></thead>
<tbody><tr>
<td>张三</td>
<td>前端</td>
<td>2022-03-15</td>
</tr></tbody>
</table>
<ul><li><code><th> 只用于表头，浏览器默认加粗居中，且自带 <code>scope 语义（如 scope="col"）
<tr> 必须完整闭合，缺一个 <code> 就会导致后续所有列偏移
<span></span> 或 <div> 嵌套在 <code><td> 里强行撑宽高——先用 CSS 控制 <code>td 自身
美化表格的关键不是加边框，而是控制 border-collapse 和 padding
默认表格难看，往往是因为单元格之间有讨厌的双线缝隙，或者文字贴着边框挤成一团。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 加
border-collapse: collapse到<table> 上，让相邻边框合并为一条线 <li> <code>td, th的padding至少设为8px，太小显得拥挤，太大又稀疏 - 避免给
<table> 直接设 <code>border——优先给th和td单独设边框，更可控 - 表头背景用浅灰（如
#f8f9fa），偶数行加background-color: #f9f9f9就足够提升可读性 - 把
<table> 包进一个 <code><div>，给这个 <code><div> 加 <code>overflow-x: auto和width: 100% - 确保
<table> 本身不设 <code>width: 100%——让它按内容自然宽度展开 - 测试时真机滑动，确认横向滚动是否顺畅；Safari 下有时需要额外加
-webkit-overflow-scrolling: touch - 不要对
<th> 做 <code>position: sticky——多数安卓 WebView 不支持，反而导致错位排序和筛选功能别手写 JS，先查
data-tables.net或用DataTable初始化手写点击表头排序很容易漏掉多字段排序、空值处理、大小写敏感这些细节，而且一加搜索框就变成状态管理问题。
- CDN 引入
https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js和对应 CSS - 初始化只要一行：
$(‘#myTable’).DataTable();，自动识别<thead>/</thead> <tbody> <li>如果不用 jQuery，改用 <code>tabulator.info——它的Tabulator构造函数接受原生 DOM 表格元素 - 注意：启用排序后，
<th> 里的 HTML（比如图标）可能被重写，需用 <code>render配置项保留真正麻烦的不是怎么让表格“好看”，而是当数据超过百行、带数字排序、含链接或按钮时，样式和交互怎么不互相打架。这时候多花十分钟看文档，比调两小时
z-index实在得多。
- CDN 引入
响应式表格在小屏上别硬塞，用 overflow-x: auto 包一层最稳妥
手机上看 5 列表格时，强行缩放字体或隐藏列，用户根本找不到关键信息。与其花时间写媒体查询隐藏列，不如承认“它本来就不该在小屏完整显示”。
