一般表格显示效果为
竖向效果
css代码,如果需要只在手机上显示这种效果,可能用到媒体查询
@media only screen and (max-width:760px){这里是css代码} 如果不需要,可以直接这样
测试时,请去掉其它样式的影响,单独 进行测试.否则可能会被干扰
.table-responsive-y table,.table-responsive-y thead,.table-responsive-y tbody,.table-responsive-y th,.table-responsive-y td,.table-responsive-y tr{display:block}
.table-responsive-y thead tr{position:absolute;top:-9999px;left:-9999px}
.table-responsive-y tr{border:1px solid #ccc}
.table-responsive-y td{border:0;border-bottom:1px solid #eee;position:relative;padding:5px;padding-left:20%;white-space:normal;text-align:left;height:auto!important;line-height:auto!important;;}
.table-responsive-y td:before{position:absolute;top:6px;left:6px;width:40%;/*这里可能没用*/padding-right:10px;white-space:nowrap;text-align:left;font-weight:bold;height:auto!important;line-height:auto!important;}
.table-responsive-y td:before{content:attr(data-title)}
.table-responsive-y h3 a{font-size:16px;color:#3cbfae;font-weight:bold}
<div class="table-responsive-y">
<table class="">
<thead>
<tr>
<th>
起步
</th>
<th>
CSS
</th>
<th>
元件
</th>
<th>
模块
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="起步">
下载前端框架
</td>
<td data-title="CSS">
文本
</td>
<td data-title="元件">
网格系统
</td>
<td data-title="模块">
框架
</td>
</tr>
<tbody>
</table>
</div>