html 表格响应式布局适应移动端后类似卡片

响应前

样式

 

显示效果

设置响应样式

.inside-table{
		width: 95%;
	}
	.inside-table table{
		font-size: 14px;
		border-spacing: 0 30px;
		border-collapse: separate;
	}
	.inside-table tr:nth-child(1){
		display: none;
	}
	.inside-table tr{
		display: block;
		border: 1px solid darkgrey;
		margin: 0 0 30px;
	}
	.inside-table td{
		display: block;
		text-align: right;
		padding: 0 20px;
	}
	.inside-table td:nth-child(1){
		font-weight: 500;
		text-align: left;
		font-size: 16px;
	}
	.inside-table td:nth-child(2):before{
		content: 'Form';
		float:left;
		text-align: left;
		font-weight: 100;
	}
	.inside-table td:nth-child(3):before{
		content: 'Strength';
		float:left;
		text-align: left;
		font-weight: 100;
	}
	.inside-table td:nth-child(4):before{
		content: 'Brand Equivalent';
		float:left;
		text-align: left;
		font-weight: 100;
	}
	.inside-table td:nth-child(5):before{
		content: 'Prescribing Information';
		float:left;
		text-align: left;
		font-weight: 100;
	}

显示效果