Как таблицы сделать Респонсивными?

[TechSide]

Ребята бьюсь целый день и никак не могу понять каким образом мне адаптивить таблицу под мобильный телефон! Если не сложно Специалист - помоги советом или решением! 1 вложение - веб, 2-е реальный результат мобильный вариант, 3-е так должно быть.

Понимаю что нужно нужно @media screen включать, но вот как не сходиться в голове.....

extra.less

.ability-groups table {
    font-family: 'Firasanscondensedregular',sans-serif;
    border: 1px solid #dfdfdf;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

.ability-groups table th {
    background: #5a93af;
    font-size: .85em;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    padding: 15px 0;
}

.ability-groups table tr {
    border: 1px solid #cbcbcb;
    padding: .35em;
}

.ability-groups tr:nth-child(2n + 1) {
    background: rgba(125,125,125,0.2);
}

.ability-groups table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}

.ability-groups table th, .ability-groups table td {
    padding: .625em;
    text-align: center;
}

.ability-groups table.depiction tr td {
    text-align: left;
}

.ability-groups table.depiction tr td:first-child {
    width: 20%;
}

 

[unconfirmed]

.это не касается движка. Вам сюда:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

и куча примеров есть в движке.