CSS表格美化：让数据展示不再枯燥

给表格穿件好看的衣服

平时做网页时，表格总是逃不掉的元素。不管是后台管理、报表页面，还是课程表、价格清单，表格一多，白底黑线那种原始样式看着就头疼。其实只要加点CSS，就能让它立马变得清爽耐看。

去掉默认边框，改用简洁线条

浏览器默认的表格边框又粗又硬，先把它干掉。用细一点的边框，视觉上更轻盈。

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

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

这里用了 border-collapse: collapse 把双线边框合并成单线，再配合浅灰色边框，整体更干净。

隔行换色提升可读性

长表格一行行看下来容易串行，给奇偶行加上不同背景色，阅读起来轻松不少。

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}

鼠标划过时再加深一点背景，用户能清楚知道当前在哪一行，这对操作类表格特别实用。

表头突出，一眼分清结构

表头是导航，得让它显眼些。加个深色背景和白色文字，结构立刻清晰。

th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}

颜色可以根据网站主色调调整，绿色只是例子，蓝色、灰色也常用。

加点圆角和阴影，让表格“浮”起来

想让表格更有设计感？可以给整个表格容器加点圆角和阴影，像卡片一样。

.table-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.table-container table {
  width: 100%;
}

注意要给容器设置 overflow: hidden，不然圆角会失效。

响应式处理，手机上看也不挤

现在谁还只在电脑上看网页？手机上表格容易溢出。简单做法是给外层加个滚动容器。

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

这样在小屏幕上左右滑动就能看全内容，不会破坏布局。

表格不需要多花哨，干净、清晰、好读才是关键。几行CSS就能让它从“程序员风格”变成“产品经理都夸”的样子，何乐不为。