<table class="responsive-table">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>name</th>
<th>year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>gary</td>
<td>20</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td>rick</td>
<td>31</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
<td>rick</td>
<td>11</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
<td>rick</td>
<td>12</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
<td>lily</td>
<td>33</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
<td>rick</td>
<td>32</td>
</tr>
</tbody>
</table>
table tr td,table tr th{
border:1px solid #1d1e22;
padding:5px;
}
table{
border-collapse:collapse;
}
@media only screen and (max-width: 992px) {
table.responsive-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
/* sort out borders */
}
table.responsive-table td:empty:before {
content: "\00a0";
}
table.responsive-table th,
table.responsive-table td {
margin: 0;
vertical-align: top;
}
table.responsive-table th {
text-align: left;
}
table.responsive-table thead {
display: block;
float: left;
}
table.responsive-table thead tr {
display: block;
padding: 0 10px 0 0;
}
table.responsive-table thead tr th::before {
content: "\00a0";
}
table.responsive-table tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
table.responsive-table tbody tr {
display: inline-block;
vertical-align: top;
}
table.responsive-table th {
display: block;
text-align: right;
}
table.responsive-table td {
display: block;
min-height: 1.25em;
text-align: left;
}
table.responsive-table tr {
border-bottom: none;
padding: 0 10px;
}
table.responsive-table thead {
border: 0;
border-right: 1px solid #1d1e22;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.