响应式表格

宽屏下表格

移动端效果

<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>

 

转载于:https://my.oschina.net/u/3529780/blog/920068