使用HTML和CSS创建一个响应式表格布局
要创建一个响应式表格布局，您可以使用HTML和CSS。以下是一些步骤：1. HTML 结构
首先，创建一个HTML表格结构。在`<table>`标签中，使用`<thead>`定义表头行，`<tbody>`定义表体行，并在每个行中使用`<th>`或`<td>`定义单元格。
<table>
<thead>
<tr>
<th>表头标题1</th>
<th>表头标题2</th>
<th>表头标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
</tbody>
</table>
2. CSS 样式
接下来，使用CSS样式使表格具有响应式布局。您可以使用媒体查询和flexbox布局来实现这一点。
/* 定义默认样式 */
table {
width: 100%;
}
/* 使用媒体查询，在小屏幕上进行调整 */
@media screen and (max-width: 600px) {
table,
thead,
tbody,
tr,
th,
td {
display: block;
}
/* 设置表头隐藏 */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
/* 定义每个单元格的样式 */
td {
border: none;
position: relative;
padding-left: 50%;
}
/* 设置每个单元格的内容和样式 */
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
font-weight: bold;
}
}
在上面的CSS代码中，我们使用@media查询来指定在小于600px宽度的屏幕上应用的样式。这些样式根据需要将表格转换为块级元素，并隐藏表头。然后，我们使用`td:before`伪元素为每个单元格添加标签。
3. 添加 data-label
要使每个单元格具有正确的标签，请在HTML中为每个`<td>`元素添加`data-label`属性。这将被CSS样式中的`:before`伪元素所引用。
<tr>
<td data-label="表头标题1">内容1</td>
<td data-label="表头标题2">内容2</td>
<td data-label="表头标题3">内容3</td>
</tr>
完成后，您的表格将具有响应式布局，可以适应不同大小的屏幕。
页:
[1]