#编程技术 2024-12-23 10:51:00 | 全文 1546 字，阅读约需 4 分钟 | 加载中... 次浏览
现在的网页开发中，响应式设计至关重要，它能够确保网页在不同设备上都能提供良好的用户体验。本文将使用 HTML、CSS 和原生 JavaScript，实现在移动端将 Table 表格自动转变为卡片样式，并且每个卡片都展示表头，从而提升网页在移动端的用户体验和可读性。
实现效果如下，具体样式可以根据实际需求调整：
PC 端
移动端
首先，创建一个基本的 HTML 页面，在页面中构建一个表格结构。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Table to Card on Mobile
</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>程序员</td>
<td>138xxxxxxxx</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
<td>139xxxxxxxx</td>
</tr>
</tbody>
</table>
</body>
</html>
在对应的 CSS 样式中，先定义 PC 端表格的正常样式，然后通过媒体查询（@media）针对移动端进行样式调整。
/* PC端表格样式 */
#myTable {
width: 100%;
border-collapse: collapse; /* 合并边框 */
}
#myTable th, #myTable td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
/* 移动端卡片样式 */
@media (max-width: 768px) { /* 当屏幕宽度小于等于768px时应用以下样式 */
#myTable {
display: block; /* 使表格成为块级元素 */
}
#myTable thead {
display: none; /* 隐藏表头 */
}
#myTable tbody tr {
display: block; /* 使表格行成为块级元素 */
margin-bottom: 10px; /* 设置卡片间距 */
border: 1px solid #ddd;
padding: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
border-radius: 5px; /* 添加圆角 */
}
#myTable td {
display: block; /* 使表格单元格成为块级元素 */
border: none; /* 移除单元格边框 */
padding: 5px 0;
}
/* 使用伪元素在单元格前添加标签 */
#myTable td:before {
content: attr(data-label) ": "; /* 获取data-label属性的值 */
font-weight: bold;
display: inline-block;
width: 60px; /* 设置标签宽度 */
}
}
（可选，用于动态添加data-label属性）
为了在移动端显示每列的标题，我们需要在每个<td>元素上添加data-label属性
window.onload = function() {
const table = document.getElementById('myTable');
const headers = table.querySelectorAll('th');
const rows = table.querySelectorAll('tbody tr');
rows.forEach(row => {
const cells = row.querySelectorAll('td');
cells.forEach((cell, index) => {
cell.setAttribute('data-label', headers[index].textContent);
});
});
}
这段 JavaScript 代码会在页面加载完成后执行，它会遍历表格的每一行和每一个单元格，并将对应的表头文本设置为单元格的 data-label 属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Table to Card on Mobile
</title>
<style>
/* PC端表格样式 */
#myTable {
width: 100%;
border-collapse: collapse; /* 合并边框 */
}
#myTable th, #myTable td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
/* 移动端卡片样式 */
@media (max-width: 768px) { /* 当屏幕宽度小于等于768px时应用以下样式 */
#myTable {
display: block; /* 使表格成为块级元素 */
}
#myTable thead {
display: none; /* 隐藏表头 */
}
#myTable tbody tr {
display: block; /* 使表格行成为块级元素 */
margin-bottom: 10px; /* 设置卡片间距 */
border: 1px solid #ddd;
padding: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
border-radius: 5px; /* 添加圆角 */
}
#myTable td {
display: block; /* 使表格单元格成为块级元素 */
border: none; /* 移除单元格边框 */
padding: 5px 0;
}
/* 使用伪元素在单元格前添加标签 */
#myTable td:before {
content: attr(data-label) ": "; /* 获取data-label属性的值 */
font-weight: bold;
display: inline-block;
width: 60px; /* 设置标签宽度 */
}
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>程序员</td>
<td>138xxxxxxxx</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
<td>139xxxxxxxx</td>
</tr>
</tbody>
</table>
<script>
window.onload = function() {
const table = document.getElementById('myTable');
const headers = table.querySelectorAll('th');
const rows = table.querySelectorAll('tbody tr');
rows.forEach(row => {
const cells = row.querySelectorAll('td');
cells.forEach((cell, index) => {
cell.setAttribute('data-label', headers[index].textContent);
});
});
}
</script>
</body>
</html>
通过以上 HTML、CSS 和 JavaScript 的协同工作，就能够实现在移动端将 Table 表格自动转变为卡片样式，并且每个卡片都展示表头的功能，从而提升网页在移动端的用户体验和可读性。在实际应用中，还可以根据项目需求进一步优化样式和功能，例如添加动画效果、调整卡片布局等。
×
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。