<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">150406</td> <td class="name">移动应用开发课程</td> <td class="actions"> <a href="#">修改</a><a href="del">删除</a> </td> </tr> <tr> <td class="number">150406</td> <td class="name">移动应用开发课程</td> <td class="actions"> <a href="#">修改</a><a href="del">删除</a> </td> </tr> </tbody> </table> h1{ font-size: 30px; text-align: center; color:#666666 ; } table.responsive{ 98%; margin: 0 auto; border: 1px solid #666666; border-collapse:collapse; box-shadow: 0 0 10px 0 rgba(0,0,0,5); } table.responsive th,table.responsive td{ border: 1px solid #666666; 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-480px){ table.responsive{ box-shadow: none; border:none; } table.responsive thead{ display: none; } /*把所有的tr,td进行块状分布*/ 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{ text-align: left; padding-left: 28%; background-color: #35B558; } 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{ text-align: left; padding-left: 28%; } table.responsive .actions::before{ content: "课程操作"; position: absolute; left: .5em; top:.5em; font-weight: bold; } }