做前端这么久，表格样式调整真的是又基础又容易踩坑。新手刚开始调table，要么表格歪歪扭扭，要么边框乱成一团，要么文字挤在一起没法看，调试半天还找不到问题，真的能气笑。
其实CSS调table，不用记太多花里胡哨的属性，重点就那几个，搞定它们，不管是简单的数据表格，还是复杂的展示表格，都能轻松拿捏。而且很多属性是配套用的，单独用反而出问题。
先说说最基础的边框，table默认是没有边框的，而且单元格之间会有缝隙，巨难看。用border给table、th、td都加上边框，比如table, th, td { border: 1px solid #ddd; }，但这样单元格之间会有双边框，丑得不行。
这时候就需要border-collapse属性，设为collapse，就能把单元格的边框合并成一条，瞬间整洁多了。这个属性真的是调表格的必备，少了它，再好看的边框也白搭，我刚入行时就因为忘了加这个，调了半小时边框。
然后是表格宽度和高度，用width和height控制，单位常用px或百分比。比如width: 80%，让表格自适应父容器，不用写死尺寸，适配不同屏幕。高度不用刻意设，让单元格内容自动撑开就好，设太死反而容易导致文字溢出。
单元格的内边距也很关键，td和th默认内边距特别小，文字贴边，看着特别挤。用padding设个10px左右，比如td, th { padding: 10px 15px; }，上下10px、左右15px，文字和边框有距离，瞬间清爽。
还有文本对齐，th默认是居中对齐，td默认是左对齐，根据需求调整。用text-align控制水平对齐（left/center/right），vertical-align控制垂直对齐（middle/top/bottom），比如表格内容垂直居中，就写td { vertical-align: middle; }，不然文字上下偏移，看着很别扭。
另外还有表格背景和奇偶行样式，table可以设background-color改整体背景，也能给th设不同背景，区分表头和内容。奇偶行用nth-child(odd/even)设置不同样式，比如奇数行灰色、偶数行白色，数据多的时候更容易区分，用户看着也舒服。
不多说，整个综合实例，所有常用属性都包含，直接复制就能运行，注释写得明明白白，新手也能看懂：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS调整table属性综合实例</title>
<style>
/* 重置默认样式，避免干扰 */
* { margin: 20px; padding: 0; }
/* 1. 表格基础样式：边框+合并边框 */
table {
width: 80%; /* 自适应宽度 */
border-collapse: collapse; /* 合并单元格边框 */
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 轻微阴影，更精致 */
}
/* 2. 表头和单元格样式：边框+内边距+对齐 */
th, td {
border: 1px solid #ddd;
padding: 12px 15px; /* 内边距，避免文字贴边 */
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
/* 3. 表头样式区分 */
th {
background-color: #007fff;
color: #fff;
font-weight: 600;
}
/* 4. 奇偶行样式，方便区分数据 */
table tr:nth-child(odd) {
background-color: #f8f9fa;
}
/* 5. 鼠标悬浮效果，提升体验 */
table tr:hover {
background-color: #e8f4ff;
cursor: default;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>类型</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CSS表格属性</td>
<td>前端知识点</td>
<td>已掌握</td>
</tr>
<tr>
<td>2</td>
<td>border-collapse</td>
<td>CSS属性</td>
<td>已掌握</td>
</tr>
<tr>
<td>3</td>
<td>表格悬浮效果</td>
<td>样式优化</td>
<td>学习中</td>
</tr>
</tbody>
</table>
</body>
</html>
调表格时别单独给table加边框，忘了给td和th加，这样只有表格外框，单元格没边框，巨难看。还有border-collapse一定要和border配套用，不然合并不了边框。
评论