Как сделать overflow для отдельной части таблицы?

Question

[fraqlehver]

Есть таблица, все элементы кроме Период, Доходность, Затраты на электричество, Чистая прибыль - должны быть вне скролла. Тоесть скролл будет у строк начиная с 2 элемента

<table class="table table-striped">
    <thead>
    <tr>
        <th>Период</th>
        <th>День</th>
        <th>Месяц</th>
        <th>Год</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Доходность</td>
        <td>$2.90</td>
        <td>$86.95</td>
        <td>$1,043.37</td>
    </tr>
    <tr>
        <td>Затраты на электричество</td>
        <td>$2.02</td>
        <td>$60.48</td>
        <td>$725.76</td>
    </tr>
    <tr>
        <td>Чистая прибыль</td>
        <td>$0.88</td>
        <td>$26.47</td>
        <td>$317.61</td>
    </tr>
    </tbody>
</table>

Comments

[Ankhena]

Не помню, где хорошая статья по этому поводу, вот первая попавшаяся из гугла https://tympanus.net/codrops/2014/01/09/sticky-tab...
Дальше продолжайте гуглить самостоятельно.

[fraqlehver]

Ankhena, Это полность отличается. Мне нужно чтобы первая колонка была ВНЕ overflow. без position. Вот как тут:

[Ankhena]

fraqlehver,

Мне нужно

С этим на фриланс.

В какую сторону гуглить я подсказала. Дальше вы можете показать, что вы делали и что именно не получилось. Желательно в песочнице на codepen.io, чтобы ваш код можно было потрогать.

Также можно гуглить не в гугле, а поискать на том же codepen. Рекомендую так и поступить.

[Даниил]

Как же эти кураторы любят про фриланс рассказывать :DDD

Answer 1

[Александр Шемаханов]

Возможно вам подойдет моё решение. На большом экране таблица полность видна, на телефоне - первый столбик выделяется, к остальным добавляется прокрутка.