9.1 滚动 (Scroll)
表格经常用于显示结构化数据，但在小屏幕设备上显示时可能变得复杂。自适应表格可以改善不同设备上的数据展示和互动，包括手机和平板。让我们来看看一些创建响应式表格的技术。
创建自适应表格的一个简单方法是 添加水平滚动。这种方法保持表格结构，并允许用户在窄屏设备上水平滚动数据。
示例：
CSS
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有滚动的自适应表格</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
<th>列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据 1</td>
<td>数据 2</td>
<td>数据 3</td>
<td>数据 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</div>
</body>
</html>
代码解释：
.table-container: 当表格超过容器宽度时，添加水平滚动table: 将表格宽度设为100%并合并单元格边框
9.2 隐藏列 (Column Hiding)
这种方法是在窄屏幕上隐藏不那么重要的列，以确保主要数据仍然可见。可以通过媒体查询实现。
示例：
CSS
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>具有隐藏列的自适应表格</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th class="hide">列 3</th>
<th class="hide">列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据 1</td>
<td>数据 2</td>
<td class="hide">数据 3</td>
<td class="hide">数据 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</body>
</html>
代码解释：
.hide: 使用媒体查询在宽度小于600px的屏幕上隐藏某些列table: 将表格宽度设为100%并合并单元格边框
9.3. 转换为块 (Stacking)
转换为块将表格行变为垂直堆叠的块，在窄屏幕上更易于阅读。这使得表格在移动设备上更友好。
示例：
CSS
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转换为块的自适应表格</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
<th>列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="列 1">数据 1</td>
<td data-label="列 2">数据 2</td>
<td data-label="列 3">数据 3</td>
<td data-label="列 4">数据 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</body>
</html>
代码解释：
- 媒体查询: 将表格转换为块元素，在宽度小于600px的屏幕上显示为堆叠块
td::before: 在每个单元格值之前添加列名的伪元素，以保持数据上下文
9.4. 转换为卡片 (Card Layout)
这种方法将每一行表格在窄屏幕上转换为独立卡片。它可以提高数据在移动设备上的可读性。
示例：
CSS
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转换为卡片的自适应表格</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
<th>列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="列 1">数据 1</td>
<td data-label="列 2">数据 2</td>
<td data-label="列 3">数据 3</td>
<td data-label="列 4">数据 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</body>
</html>
代码解释：
- 媒体查询: 将表格转换为块元素，并在宽度小于600px的屏幕上创建卡片
td::before: 在每个单元格值之前添加列名的伪元素，以保持数据上下文
9.5 使用 CSS Frameworks
许多CSS框架，如Bootstrap，提供了内置的自适应表格解决方案。使用这些框架简化了过程，并提供了现成的样式和组件。
使用Bootstrap的示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用Bootstrap的自适应表格</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
<th>列 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据 1</td>
<td>数据 2</td>
<td>数据 3</td>
<td>数据 4</td>
</tr>
<!-- 其他行 -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
代码解释：
table.table-responsive: Bootstrap类，为窄屏设备的表格添加水平滚动container: Bootstrap类，用于容器居中和设置最大宽度
GO TO FULL VERSION