17370845950

三、使用外部CSS类进行模块化美化

将样式抽离至

1、为

2、在

3、定义.data-table th, .data-table td { border: 1px solid #ddd; padding: 10px 12px; }。

4、定义.data-table th { background-color: #4CAF50; color: white; }实现绿色表头。

四、添加斑马纹与悬停效果

通过伪类选择器增强可读性，交替行背景色帮助用户追踪横向数据，悬停高亮当前行提升交互反馈。

1、在CSS中为 tbody tr:nth-child(even) { background-color: #f9f9f9; }。

2、为 tbody tr:hover { background-color: #e8f5e8; }。

3、确保th不参与nth-child计算，仅作用于tbody内的tr。

五、响应式表格适配小屏幕

当表格列数较多时，在移动设备上易出现水平滚动或内容挤压，需通过媒体查询与结构重构保障可读性。

1、为

2、在相同媒体查询下，为th, td { min-width: 120px; white-space: nowrap; }防止文字折行破坏布局。

3、对窄屏进一步优化：使用display: flex与flex-direction: column将每行转为垂直堆叠，配合::before伪元素标注字段名，需配合JavaScript或数据属性实现语义映射。