响应式布局

最新推荐文章于 2025-08-21 14:49:46 发布

原创最新推荐文章于 2025-08-21 14:49:46 发布 · 78 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格项目实战演练</title>
<link rel="stylesheet" type="text/css" href="../css/table表格项目02.css">
</head>
<body>
<h1>表格项目实战</h1>
<table class="menu">
<thead>
<tr>
<th>课程序号</th>
<th>课程名称</th>
<th>课程操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="number">150406</td>
<td class="name">移动应用开发课程</td>
<td class="action">
<a href="#">修改</a>
<a href="del">删除</a>
</td>
</tr>
<tr>
<td class="number">140409</td>
<td class="name">web前端开发课程</td>
<td class="action">
<a href="#">修改</a>
<a href="del">删除</a>
</td>
</tr>
<tr>
<td class="number">140407</td>
<td class="name">操作系统&数据库系统课程</td>
<td class="action">
<a href="#">修改</a>
<a href="del">删除</a>
</td>
</tr>
<tr>
<td class="number">140408</td>
<td class="name">智联硬件&物联网系统课程</td>
<td class="action">
<a href="#">修改</a>
<a href="del">删除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>

CSS文件
h1{
width: 100%;
height: 40px;
line-height: 40px;
background-color: seashell;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
text-align:center;
margin: 0px;
position: relative;
}
table.menu{
width: 96%;
margin: 40px auto;
border: 2px double gray;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
}
table.menu th,table.menu td,table.menu{
border: 2px double gray;
border-collapse: collapse;
padding: 10px 10px;
}
table.menu th{
background-color: lightgreen;
font-weight: bold;
}
table.menu .number,table.menu .action{
text-align: center;
}
table.menu .action a{
color: goldenrod;
padding-left: 10px;
text-decoration: none;
}
@media (max-width: 480px) {
table.menu{
border: none;
box-shadow: none;
}
table.menu thead{
display: none;
}
table.menu tr,table.menu td{
display: block;
border: none;
position: relative;

}
table.menu tr{
margin-bottom: 20px;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
}
table.menu .number{
background-color: lightgreen;
text-align: left;
padding-left: 28%;
}
table.menu .number::before{
content: "课程序号";
position: absolute;
font-weight: bold;
left: 0.5em;
top: 0.5em;
}
table.menu .name{
text-align: left;
padding-left: 28%;
}
table.menu .name::before{
content: "课程名称";
position: absolute;
font-weight: bold;
left: 0.5em;
top: 0.5em;
}
table.menu .action{
position: absolute;
right: 0px;
top: 0px;
}
}