媒体查询合并table单元格
时间: 2023-09-22 14:11:28 浏览: 35
媒体查询可以帮助我们在不同屏幕尺寸下调整样式,而合并table单元格可以使表格更加美观和易读。以下是一个示例:
HTML代码:
```
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>设计师</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>男</td>
<td>销售员</td>
</tr>
</table>
```
CSS代码:
```
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
@media screen and (max-width: 600px) {
td:nth-of-type(2),
td:nth-of-type(3) {
display: none;
}
td:nth-of-type(1)::before {
content: "年龄:";
font-weight: bold;
}
td:nth-of-type(1)::after {
content: " 性别:";
font-weight: bold;
}
}
```
在上面的示例中,我们使用媒体查询来隐藏表格中的第二列和第三列,当屏幕宽度小于600px时。我们还使用伪元素来在第一列的文本前后添加“年龄”和“性别”的文本,以便更清楚地表达表格中的信息。这种方法使表格更易于阅读和理解,同时还可以使它在不同的设备上更加适应。