JSFiddle - React, Tailwind, and code Playground
HTML
<table class="table table-striped table-condensed table-bordered table-data">
<tr>
<th>Пользователь</th>
<th>Статус</th>
<th>Регистрация</th>
<th>Активность</th>
</tr>
<tr>
<td data-title="Пользователь">User 1</td>
<td data-title="Статус">Активен</td>
<td data-title="Регистрация">Час назад</td>
<td data-title="Активность">Час назад</td>
</tr>
<tr>
<td data-title="Пользователь">User 2</td>
<td data-title="Статус">Активен</td>
<td data-title="Регистрация">Вчера в 7:58</td>
<td data-title="Активность">Два часа назад</td>
</tr>
<tr>
<td data-title="Пользователь">User 3</td>
<td data-title="Статус">Активен</td>
<td data-title="Регистрация">5 фев в 23:44</td>
<td data-title="Активность">5 фев в 23:53</td>
</tr>
<tr>
<td data-title="Пользователь">User 4</td>
<td data-title="Статус">Активен</td>
<td data-title="Регистрация">5 фев в 20:14</td>
<td data-title="Активность">6 минут назад</td>
</tr>
</table>
CSS
/* Общие стили для вида */
* {
font: 12px verdana;
}
table {
border: 1px solid grey;
border-collapse: collapse;
width: 100%;
}
table th {
border: 1px solid grey;
padding: 3px 5px;
font-weight: bold;
text-align: center;
}
table td {
border: 1px solid grey;
padding: 3px 5px;
}
/* Адаптивность */
@media (max-width: 768px) {
table th, table td, table tr {
display: block;
}
table tr:first-child {
position: absolute;
top: -9999px;
left: -9999px;
}
table tr {
border: 1px solid grey;
}
table td {
border: none;
border-bottom: 1px solid grey;
position: relative;
padding-left: 25%;
white-space: normal;
text-align: left;
}
table td:before {
position: absolute;
top: 3px;
left: 0;
width: 25%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
text-align: right;
}
table td:before {
content: attr(data-title);
box-sizing: border-box;
}
}