Adaptive table styles

table-data.html

<div class="table">
			<div class="table__tbody white-box">
				<div class="table__tbody_inner" id="table-data">
					<div class="table__row table__row_head">
						<div class="table__cell">№</div>
						<div class="table__cell">Имя</div>
						<div class="table__cell">Страна</div>
						<div class="table__cell">Дата посещения</div>
					</div>
					<div class="table__row">
						<div class="table__cell">1</div>
						<div class="table__cell">Иван Иванов</div>
						<div class="table__cell">Россия, Якутск</div>
						<div class="table__cell">12.12.2017</div>
					</div>
					<div class="table__row">
						<div class="table__cell">2</div>
						<div class="table__cell">Виктор Миранчук</div>
						<div class="table__cell">Россия, Москва</div>
						<div class="table__cell">06.12.2017</div>
					</div>
					<div class="table__row">
						<div class="table__cell">3</div>
						<div class="table__cell">Aiko Kobayashi</div>
						<div class="table__cell">Япония</div>
						<div class="table__cell">01.12.2017</div>
					</div>
					<div class="table__row">
						<div class="table__cell">4</div>
						<div class="table__cell">Ichiro Yosida</div>
						<div class="table__cell">Япония</div>
						<div class="table__cell">01.12.2017</div>
					</div>
					<div class="table__row">
						<div class="table__cell">5</div>
						<div class="table__cell">Peter Hartmann</div>
						<div class="table__cell">Германия, Гамбург</div>
						<div class="table__cell">23.11.2017</div>
					</div>
					<div class="table__row">
						<div class="table__cell">6</div>
						<div class="table__cell">Tomas Klein</div>
						<div class="table__cell">Германия, Кёльн</div>
						<div class="table__cell">23.11.2017</div>
					</div>
					<div class="table__row">
						<div class="table__cell">7</div>
						<div class="table__cell">Stefanie K.B</div>
						<div class="table__cell">Германия, Кёльн</div>
						<div class="table__cell">23.11.2017</div>
					</div>
					<div class="table__row">
						<div class="table__cell">8</div>
						<div class="table__cell">Niko Hansson</div>
						<div class="table__cell">Швеция</div>
						<div class="table__cell">23.12.2016</div>
					</div>
					<div class="table__row table__row_last">
						<a href="">Показать еще</a>
					</div>
				</div>
			</div>
		</div>
<style>
.table {
	display: table;
	width: 100%;
	padding-right:40px;
	&__tbody {
		width: 100%;
		display: table;
		border-collapse: separate;
		font-family: "Open Sans";
		font-size: 14px;
		font-weight: 600;
		position: relative;
		padding-bottom: 60px;
		&_inner {
			width: 100%;
			display: table;
			border-collapse: collapse;
		}
	}
	&__row {
		display: table-row;
		@media (max-width: 39.9375em){
			display: flex;
			flex-direction: column;
			&:nth-child(2){
				border-top: 0px !important;
			}
		}
		& + .table__row {
			border-top: 1px solid #eee;
		}
		&_head {
			background: linear-gradient(to top, #609cc6 0%, #8ebcd8 100%);
			color: white;
			font-weight: 400;
			box-shadow: 0px 10px 40px 0px #edf0f8;
			@media (max-width: 39.9375em){
				display: none;
			}
		}
		&_last {
			display: flex;
			text-align: center;
			position: absolute;
			width: 100%;
			a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 60px;
				font-weight: 400;
			}
		}
	}
	&__cell {
		padding: 20px 30px;
		display: table-cell;
		@media (max-width: 39.9375em){
			&:before {
		    content: attr(data-column);
		    color: #999999;
				position: absolute;
				margin-top: -22px;
			}
			&:first-child:before {
				content: attr(data-column)" ";
				color: black;
				position: relative;
			}
		}
	}
}

</style>
<script>
if($('div').is('#table-data')){
  var count = $('#table-data .table__row_head .table__cell').length + 1;
  var tableData = [];
  $('#table-data .table__row_head .table__cell').each(function(){
    tableData.push($(this).text());
  });
  (function($){
    for (var i = 1; i < count; i++) {
      $('#table-data .table__row:not(:first-child) .table__cell:nth-child('+i+')').each(function(){
        $(this).attr('data-column',tableData[i-1]);
      });
    }
  })(jQuery);
}
</script>