在HTML中创建响应式表格有多种方法，这里介绍两种。
第一种方法是使用CSS来调整表格的布局和外观，把多列表格转换成两列。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式表格例一</title>
<style>
table {
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: none;
display: block;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
}
</style>
</head>
<body>
<table>
<caption>例一</caption>
<thead>
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="表头 1">数据 1</td>
<td data-label="表头 2">数据 2</td>
<td data-label="表头 3">数据 3</td>
</tr>
<tr>
<td data-label="表头 1">数据 4</td>
<td data-label="表头 2">数据 5</td>
<td data-label="表头 3">数据 6</td>
</tr>
</tbody>
</table>
</body>
</html>
在这个例子中：
- 表格被设置为占据其容器宽度的100%。
-
<thead>部分是表头。 -
<tbody>部分是表数据。 - CSS 媒体查询 (
@media)：当屏幕宽度小于或等于600像素时调整表格的布局。在这种情况下，表格被转换为块布局，每一行的单元格都垂直显示。表头被隐藏，数据单元格前缀为其对应的表头标签。 data-label属性用于标记每个数据单元格，然后在CSStd::before中使用content: attr(data-label);显示标签。
这种方法确保表格在较小的屏幕上即使可读性和可用性。您可以进一步自定义样式以满足特定的设计需求。
在响应式网页设计中创建可读的表格的另一种方法是使用水平滚动。当你的表格有许多列，无法在较小的屏幕上轻松显示时，这种方法非常适用。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式表格例二</title>
<style>
.table-wrapper {
overflow-x: auto;
}
table {
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
<th>表头 4</th>
<th>表头 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据样本 1</td>
<td>数据样本 2</td>
<td>数据样本 3</td>
<td>数据样本 4</td>
<td>数据样本 5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
在这个例子中，把表格放在一个容器内，容器的宽度会随着浏览器窗口的宽度改变，但表格的宽度保持固定，但表格可以水平滚动。
- 使用
.table-wrapper类创建一个容器，允许表格进行水平滚动。 overflow-x: auto;属性确保容器只在必要时显示水平滚动条。
这种方法允许用户在较小的屏幕上水平滚动以查看额外的列，保持可读性而不损害表格的结构。该方法的最大优点是不改变表格的样式和结构，所以是一种优选方案。