css3 表格分两栏竖向排列,效果非常干净清爽(纵向显示)

一般表格显示效果为

竖向效果

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>