function WindowResize(returnWidth) {
var Width = 0;
var Height = 0;
if (!window.innerWidth) {
if (!(document.documentElement.clientWidth == 0)) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
} else {
w = document.body.clientWidth;
h = document.body.clientHeight;
}
} else {
w = window.innerWidth;
h = window.innerHeight;
}
return (returnWidth) ? w : h;
}
function setSameTDHeight(Width) {
Width = parseInt(Width);
$("td").each(
function() {
}
);
}
$(window).resize(
function() {
setSameTDHeight(WindowResize(true));
}
);
$(document).ready(
function() {
setSameTDHeight(WindowResize(true));
}
);
body {
font-family: "Open Sans", sans-serif;
}
div {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
table {
width: 100%;
max-width: 100%;
}
tbody tr:nth-of-type(odd) {
background-color: #EEEEEE;
}
tbody td {
font-size: 12px;
}
thead th {
font-weight: 700;
font-size: 14px;
}
td, th {
padding: 5px;
}
@media screen and (max-width: 768px) {
table {
position: absolute;
top: 0;
}
table, thead, tbody, tr, td, th {
display: block;
}
thead {
width: 0;
height: 0;
}
thead th {
font-size: 0;
color: transparent;
}
table tr {
display: block;
}
table tr:after {
content: "";
display: table;
clear: both;
}
table tr:before {
display: block;
}
table td {
width: 100%;
box-sizing: border-box;
clear: both;
display: block;
padding-left: 40%;
}
table td:before {
content: attr(data-title);
border: 1px solid green;
width: 60%;
float: left;
min-height: 100%;
margin-left: -65%;
}
table td:after {
content: "";
display: table;
clear: both;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=latin-ext" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th>
<th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th>
<th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th>
<th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th>
<th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td>
<td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td>
<td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td>
<td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td>
<td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td>
</tr>
<tr>
<td data-title="Jméno">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td>
<td data-title="Příjmení">Maximov</td>
<td data-title="Věková šarže">25</td>
<td data-title="Zaměření">Pilot</td>
<td data-title="Životní situace">Employed</td>
</tr>
<tr>
<td data-title="Jméno">Evelyn</td>
<td data-title="Příjmení">Headrow</td>
<td data-title="Věková šarže">19</td>
<td data-title="Zaměření">Student</td>
<td data-title="Životní situace">Not Employed</td>
</tr>
<tr>
<td data-title="Jméno">Bernard</td>
<td data-title="Příjmení">Milhouf</td>
<td data-title="Věková šarže">37</td>
<td data-title="Zaměření">Teacher</td>
<td data-title="Životní situace">Employed</td>
</tr>
<tr>
<td data-title="Jméno">Angelika</td>
<td data-title="Příjmení">deVille</td>
<td data-title="Věková šarže">68</td>
<td data-title="Zaměření">Designer</td>
<td data-title="Životní situace">Retired</td>
</tr>
</tbody>
</table>
</div>