/* Таблицы и обёртка */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}

.table{
  width:100%;
  min-width:0;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  overflow:hidden;
}
.table thead th{
  text-align:left;
  padding:10px 12px;
  font-weight:600;
  color:var(--fg);
  background:rgba(0,0,0,.08);
  border-bottom:1px solid var(--card-border);
  white-space:nowrap;
}
.table tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--card-border);
  vertical-align:top;
  color:var(--fg);
  word-break:break-word;
  overflow-wrap:anywhere;
}
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:nth-child(2n){ background:rgba(255,255,255,.03); }

/* рекомендуемые классы-колонки */
.col-id{ width:60px; white-space:nowrap; }
.col-login{ max-width:220px; }
.col-flag{ width:90px; text-align:center; white-space:nowrap; }
.col-itdo,
.col-riasec,
.col-luscher{ width:80px; text-align:center; white-space:nowrap; }
.col-created{ max-width:180px; white-space:nowrap; }
.col-actions{ min-width:180px; white-space:normal; }

@media (max-width: 720px){
  .table thead th{
    white-space:normal;
  }
  .col-id,
  .col-login,
  .col-flag,
  .col-itdo,
  .col-riasec,
  .col-luscher,
  .col-created,
  .col-actions{
    width:auto;
  }
}