当屏幕宽度不足以显示整个表格时，添加水平滚动条。
| 姓名 | 职位 | 部门 | 入职日期 | 邮箱 | 电话 | 地址 | 薪资 |
|---|---|---|---|---|---|---|---|
| 张三 | 前端开发 | 技术部 | 2020-05-15 | zhangsan@example.com | 13800138000 | 北京市海淀区中关村大街1号 | ¥15,000 |
| 李四 | 产品经理 | 产品部 | 2019-08-20 | lisi@example.com | 13900139000 | 北京市朝阳区建国路88号 | ¥18,000 |
<style>
.responsive-table {
overflow-x: auto; /* 添加水平滚动条 */
}
</style>
<div class="responsive-table">
<table>
<!-- 表格内容 -->
</table>
</div>
使用CSS为表格添加斑马纹样式和悬停高亮效果，提高可读性。
| 产品ID | 产品名称 | 类别 | 价格 | 库存 |
|---|---|---|---|---|
| P001 | 无线鼠标 | 电子产品 | ¥129.00 | 156 |
| P002 | 机械键盘 | 电子产品 | ¥399.00 | 78 |
| P003 | 办公椅 | 家具 | ¥599.00 | 32 |
| P004 | 台灯 | 家居用品 | ¥89.00 | 210 |
| P005 | 笔记本支架 | 办公用品 | ¥69.00 | 185 |
<style>
.zebra-table {
width: 100%;
}
.zebra-table thead {
background-color: #3498db;
color: white;
}
.zebra-table th, .zebra-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.zebra-table tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
.zebra-table tbody tr:hover {
background-color: #e3f2fd;
}
</style>
当表格内容很长需要滚动时，保持表头固定在顶部。
| 日期 | 订单号 | 客户 | 产品 | 数量 | 金额 | 状态 |
|---|---|---|---|---|---|---|
| 2023-01-05 | ORD20230105001 | 王五 | 无线耳机 | 2 | ¥598.00 | 已发货 |
| 2023-01-06 | ORD20230106002 | 赵六 | 智能手表 | 1 | ¥899.00 | 已付款 |
| 2023-01-07 | ORD20230107003 | 钱七 | 蓝牙音箱 | 3 | ¥897.00 | 已发货 |
| 2023-01-08 | ORD20230108004 | 孙八 | 移动电源 | 5 | ¥495.00 | 已完成 |
| 2023-01-09 | ORD20230109005 | 周九 | USB-C数据线 | 10 | ¥190.00 | 已付款 |
| 2023-01-10 | ORD20230110006 | 吴十 | 手机支架 | 2 | ¥38.00 | 已发货 |
| 2023-01-11 | ORD20230111007 | 郑十一 | 无线充电器 | 1 | ¥129.00 | 已完成 |
| 2023-01-12 | ORD20230112008 | 王十二 | 笔记本电脑 | 1 | ¥6,999.00 | 已付款 |
<style>
.sticky-header {
max-height: 300px;
overflow-y: auto;
margin: 20px 0;
border: 1px solid #ddd;
}
.sticky-header thead th {
position: sticky;
top: 0;
background-color: #2c3e50;
color: white;
z-index: 10;
}
</style>
<div class="sticky-header">
<table>
<!-- 表格内容 -->
</table>
</div>
使用colgroup和col元素为表格的不同列设置不同的样式。
| 季度 | 销售额 | 增长率 |
|---|---|---|
| 第一季度 | ¥1,250,000 | +12.5% |
| 第二季度 | ¥1,450,000 | +16.0% |
| 第三季度 | ¥1,620,000 | +11.7% |
| 第四季度 | ¥1,980,000 | +22.2% |
| 年度总计 | ¥6,300,000 | +15.6% |
<style>
.colgroup-table colgroup col:nth-child(1) {
background-color: #e3f2fd; /* 第一列背景色 */
}
.colgroup-table colgroup col:nth-child(2) {
background-color: #fff8e1; /* 第二列背景色 */
}
.colgroup-table colgroup col:nth-child(3) {
background-color: #e8f5e9; /* 第三列背景色 */
}
</style>
<table class="colgroup-table">
<colgroup>
<col span="1">
<col span="1">
<col span="1">
</colgroup>
<!-- 表格内容 -->
</table>