Adaptive Table

sass

//table media
table
	border: 1px solid #ccc
	width: 100%
	margin: 0
	padding: 0
	border-collapse: collapse
	border-spacing: 0
	tr
		border: 1px solid #ddd
		padding: 5px
	th,td
		padding: 10px
		text-align: center
	th
		text-transform: uppercase
		font-size: 14px
		letter-spacing: 1px
@media screen and (max-width: 600px)
	table
		border: 0
		thead
			display: none
		tr
			margin-bottom: 10px
			display: block
			border-bottom: 2px solid #ddd
		td
			display: block
			text-align: right
			font-size: 13px
			border-bottom: 1px dotted #ccc
			&:last-child
				border-bottom: 0
			&:before
				content: attr(data-label)
				float: left
				text-transform: uppercase
				font-weight: bold

Table with data-label

					<table>
						<thead>
							<tr>
								<th>Город</th>
								<th>Тариф "Эконом" ЖД/Аэро</th>
								<th>Тариф "Стандарт" ЖД/Аэро</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td data-label="Город">Ялта</td>
								<td data-label="Issue Date">02/01/2015</td>
								<td data-label="Amount">$2,311</td>
							</tr>
							<tr>
								<td data-label="Payment">Payment #2</td>
								<td data-label="Issue Date">03/01/2015</td>
								<td data-label="Amount">$3,211</td>
							</tr>
						</tbody>
					</table>