HTML实现table表格移动端自动转为卡片样式

#编程技术 2024-12-23 10:51:00 | 全文 1546 字，阅读约需 4 分钟 | 加载中... 次浏览

👋 相关阅读

现在的网页开发中，响应式设计至关重要，它能够确保网页在不同设备上都能提供良好的用户体验。本文将使用 HTML、CSS 和原生 JavaScript，实现在移动端将 Table 表格自动转变为卡片样式，并且每个卡片都展示表头，从而提升网页在移动端的用户体验和可读性。

实现效果如下，具体样式可以根据实际需求调整：

PC 端

移动端

一、HTML 结构搭建

首先，创建一个基本的 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 样式设置

在对应的 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; /* 设置标签宽度 */
  }
}

三、JavaScript 功能实现

（可选，用于动态添加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 表格自动转变为卡片样式，并且每个卡片都展示表头的功能，从而提升网页在移动端的用户体验和可读性。在实际应用中，还可以根据项目需求进一步优化样式和功能，例如添加动画效果、调整卡片布局等。

#前端 #html

个人网站接入 Google 登录 >