正确表格结构必须用<table><thead><tbody>语义化标签，而非CSS模拟；需规范使用<th><td>、闭合<tr>、合理设置border-collapse、padding及响应式overflow-x: auto；推荐DataTables或Tabulator处理复杂交互。
表格结构必须用 <table>、<thead>、<tbody> 搭配，不能只靠 <div>
纯 CSS Grid 或 Flex 布局做“假表格”在语义和可访问性上会出问题——屏幕阅读器读不出行列关系，Excel 导入也容易错乱。真正漂亮的表格，前提是结构正确。
正确写法示例：
<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>
-
<th>只用于表头，浏览器默认加粗居中，且自带scope语义（如scope="col"） - 每行
<tr>必须完整闭合，缺一个</td>就会导致后续所有列偏移 - 不要用
<span>或<div>嵌套在<td>里强行撑宽高——先用 CSS 控制td自身
美化表格的关键不是加边框，而是控制 border-collapse 和 padding
默认表格难看，往往是因为单元格之间有讨厌的双线缝隙，或者文字贴着边框挤成一团。
- 加
border-collapse: collapse到<table>上，让相邻边框合并为一条线 -
td, th的padding至少设为8px，太小显得拥挤，太大又稀疏 - 避免给
<table>直接设border——优先给th和td单独设边框，更可控 - 表头背景用浅灰（如
#f8f9fa），偶数行加background-color: #f9f9f9就足够提升可读性
响应式表格在小屏上别硬塞，用 overflow-x: auto 包一层最稳妥
手机上看 5 列表格时，强行缩放字体或隐藏列，用户根本找不到关键信息。与其花时间写媒体查询隐藏列，不如承认“它本来就不该在小屏完整显示”。
立即学习“前端免费学习笔记（深入）”；
- 把
<table>包进一个<div>，给这个<div>加overflow-x: auto和width: 100% - 确保
<table>本身不设width: 100%——让它按内容自然宽度展开 - 测试时真机滑动，确认横向滚动是否顺畅；Safari 下有时需要额外加
-webkit-overflow-scrolling: touch - 不要对
<th>做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>/<tbody> - 如果不用 jQuery，改用
tabulator.info——它的Tabulator构造函数接受原生 DOM 表格元素 - 注意：启用排序后，
<th>里的 HTML（比如图标）可能被重写，需用render配置项保留
真正麻烦的不是怎么让表格“好看”，而是当数据超过百行、带数字排序、含链接或按钮时，样式和交互怎么不互相打架。这时候多花十分钟看文档，比调两小时 z-index 实在得多。
