index.htmll
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link href="begin.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>宇宙学院相关课程</h1>
<table class="responsive">
<thead>
<tr>
<th>课程序号</th>
<th>课程名称</th>
<th>课程操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="number">150406</td>
<td class="name">移动应用开发课程</td>
<td class="actions">
<a href="#">修改</a>
<a href="del">删除</a>
</td>
</tr>
<tr>
<td class="number">150407</td>
<td class="name">PC应用开发课程</td>
<td class="actions">
<a href="#">修改</a>
<a href="del">删除</a>
</td>
</tr>
<tr>
<td class="number">150408</td>
<td class="name">PHP应用开发课程</td>
<td class="actions">
<a href="#">修改</a>
<a href="del">删除</a>
</td>
</tr>
<tr>
<td class="number">150409</td>
<td class="name">VUE应用开发课程</td>
<td class="actions">
<a href="#">修改</a>
<a href="del">删除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
begin.css
h1{
font-size:30px;
text-align:center;
color:#666;
}
table.responsive{
width:98%;
margin:0 auto;
border:1px solid #666;
border-collapse:collapse;
box-shadow:0 0 10px 0 rgba(0,0,0,.5);
}
table.responsive th,table.responsive td{
border:1px solid #666;
padding:.5em 1em;
}
table.responsive th{
background-color:#35B558;
}
table.responsive .actions a{
color:#ff5c00;
text-decoration:none;
padding:0 4px;
}
table.responsive .number,table.responsive .actions{
text-align:center;
}
/*
媒体查询
**/
@media (max-width:480px){
table.responsive{
box-shadow:none;
border:none;
}
table.responsive thead{
display:none;
}
table.responsive tr,table.responsive td{
display:block;
border:none;
position:relative;
}
table.responsive tr{
margin-bottom:1em;
box-shadow:0 1px 10px 0 rgba(0,0,0,.2);
}
table.responsive .number{
background-color:#35B558;
text-align:left;
padding-left:28%;
}
table.responsive .number::before{
content:'课程序号';
position:absolute;
left:.5em;
top:.5em;
font-weight:bold;
}
table.responsive .name{
text-align:left;
padding-left:28%;
}
table.responsive .name::before{
content:'课程名称';
position:absolute;
left:.5em;
top:.5em;
font-weight:bold;
}
table.responsive .actions{
position:absolute;
right:0;
top:0;
}
}