宽屏下表格
移动端效果
<style>
*{margin:0px;padding:0px;font-size:14px;}
h1{font-size:30px;text-align: center;color:#666;}
.responsive{width:98%;margin:0px auto;border:1px solid #666;box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);}
.responsive th,.responsive td{border:1px solid #666;padding:.5em 1em}
.responsive th{background:#35B558;}
.responsive .actions a{color:#ff5c00;text-decoration: none;padding:0px 4px;}
.responsive .number,.responsive .actions{text-align: center;}
@media (max-width:480px ) {
.responsive{box-shadow: none;border: none;}
.responsive thead{display:none;}
.responsive tr,.responsive td{display: block;border: none;position: relative;}
.responsive tr{margin-bottom: 1em;box-shadow: 0 1px 10px 0 rgba(0,0,0,0.2);}
.responsive .number{background:#35B558;text-align: left;padding-left:28%;}
.responsive .number::before{content: "课程序号";position: absolute;left:0.5em;top:0.5em;font-weight: bold;}
.responsive .name{text-align: left;padding-left:28%;}
.responsive .name::before{content: "课程名称";position: absolute;left:0.5em;top:0.5em;font-weight: bold;}
.responsive .actions{position:absolute;right:0px;top:0px;}
}
</style>
HTML
<h1>相关课程</h1>
<table class="responsive" cellspacing="0" cellpadding="0">
<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">Web前端开发课程</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>