响应式表格

代码

html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>TEST TABLE</title>
	</head>
	<body>
		<table>
			<caption>
				测试table
			</caption>
			<thead>
				<tr>
					<th>Account</th>
					<th>Due Date</th>
					<th>Amount</th>
					<th>Period</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td data-label="Account">Visa - 3412</td>
					<td data-label="Due Date">04/01/2016</td>
					<td data-label="Amount">$1,190</td>
					<td data-label="Period">03/01/2016 - 03/31/2016</td>
				</tr>
				<tr>
					<td data-label="Account">Visa - 3412</td>
					<td data-label="Due Date">04/01/2016</td>
					<td data-label="Amount">$1,190</td>
					<td data-label="Period">03/01/2016 - 03/31/2016</td>
				</tr>
				<tr>
					<td data-label="Account">Visa - 3412</td>
					<td data-label="Due Date">04/01/2016</td>
					<td data-label="Amount">$1,190</td>
					<td data-label="Period">03/01/2016 - 03/31/2016</td>
				</tr>
				<tr>
					<td data-label="Account">Visa - 3412</td>
					<td data-label="Due Date">04/01/2016</td>
					<td data-label="Amount">$1,190</td>
					<td data-label="Period">03/01/2016 - 03/31/2016</td>
				</tr>
			</tbody>
		</table>
	</body>
	<style>
		table {
			border: 1px solid #000;
			border-collapse: collapse;
			margin: 0;
			padding: 0;
			width: 100%;
		}

		table caption {
			font-size: 1.4rem;
			margin: 0.2rem;
		}

		table tr {
			background-color: #ccc;
			border: 1px solid #000;
			padding: 0.2rem;
		}

		table th,
		table td {
			text-align: center;
		}

		table th {
			font-size: 1.3rem;
			text-transform: uppercase;
		}

		@media screen and (max-width: 600px) {
			table {
				border: none;
			}

			table thead {
				display: none;
			}

			table tr {
				display: block;
				margin-bottom: 20px;
			}

			table td {
				display: block;
				margin-bottom: 10px;
				text-align: right;
				position: relative;
				border-bottom: 1px solid #ddd;
			}

			table td::before {
				position: absolute;
				content: attr(data-label);
				left: 10px;
			}
		}
	</style>
</html>
参考

响应式表格
响应式表格 ​

代码 ​

参考 ​

响应式表格

代码

参考
