HTML 表格太丑？这 5 招 CSS 样式让数据表瞬间高级

平时写后台系统或者展示业务数据时，最让人头疼的莫过于原生 HTML 表格那副“惨不忍睹”的模样。默认状态下，黑乎乎的双线边框、紧巴巴的文字间距，还有毫无层次感的背景，简直就是在劝退用户。其实想要摆脱这种上世纪 90 年代的既视感，并不需要引入复杂的前端组件库，纯 CSS 几行代码就能把数据表做得清爽又专业。

收起双线边框是第一步

很多开发者直接复制粘贴 <table> 标签，往往忽略了浏览器对边框的默认渲染机制。在默认设置下，单元格与单元格之间容易出现双实线，看着特别粗糙。解决这个问题的核心在于使用 border-collapse 属性。

table {
  width: 100%;
  **border-collapse: collapse**;
}

加上这行代码，相邻单元格的边框就会合并成一条线，这是让表格看起来“整洁”的基础门槛。千万别小看这一个属性，它是区分业余和专业的分水岭之一。

给文字一点呼吸空间

边框收拢之后，第二个问题就暴露出来了：文字死死地贴着边框，显得非常拥挤。这时候就要给 td 和 th 增加内边距。建议数值设置在 12px 到 16px 之间，太小了局促，太大了浪费屏幕空间。

配合着内边距调整，边框颜色也别再用纯黑色。试试用浅灰色（如 #e0e0e0），视觉上会更柔和。表头区域可以稍微加深底色，比如用极淡的灰色背景 #f5f5f5，这样能自然形成视觉层级，引导用户聚焦重点信息。

td, th {
  padding: 12px;
  border: 1px solid #e0e0e0;
  text-align: left;
}

增加交互时的反馈感

静态的好看只是一方面，用户在浏览长列表时，很容易串行找不到当前行。通过添加悬停效果，可以让这一行的背景色发生微妙变化，起到光标跟随的作用。

tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

注意这里用了透明度颜色值，而不是死板的纯色覆盖，这样即便表格里本身有斑马纹配色，也不会显得突兀。这种细微的反馈能极大提升用户的阅读体验，让他们觉得这个页面是“活”的。

移动端适配不能忘

现在的流量大半来自手机，宽大的表格在小屏幕上通常会出现横向滚动条，甚至撑爆布局。为了兼容不同尺寸的屏幕，可以在外层包裹一个容器并开启溢出滚动。

.table-wrapper {
  overflow-x: auto;
}

虽然这是一个简单的容器处理，但在实际项目中能规避掉绝大多数关于“手机端表格崩坏”的投诉。别让精心设计的电脑端样式，在手机上一览无余变成一坨乱码。

收尾与细节打磨

除了上述几点，还有一些小细节能锦上添花。比如如果某一列数据特别长，可以用 white-space: nowrap 防止换行破坏排版；又或者针对偶数行添加淡色背景（nth-child(even)）来增强可读性。这些操作都不复杂，但组合起来就能产生质变。

写表格不仅仅是为了塞进数据，更是为了让数据被人读懂。好的样式能让枯燥的数字变得可亲可感。花几分钟调优一下这几个 CSS 属性，你做出来的界面绝对能让同事和客户眼前一亮。下次遇到表格优化需求，不妨就从这些基础样式改起，少依赖框架，多动手尝试，这才是前端基本功的体现。