Как создать таблицу HTML с фиксированным / замороженным левым столбцом и прокручиваемым телом?

Question

Как мне создать таблицу HTML с фиксированным / замороженным левым столбцом и прокручиваемым телом?

Мне нужно простое решение. Я знаю, что это похоже на некоторые другие вопросы, такие как:

• HTML-таблица с фиксированными заголовками и фиксированным столбцом?
• Как заблокировать первую строку и первый столбец таблицы при прокрутке, возможно, с использованием JavaScript и CSS?

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

Answer 1

//If the table has tbody and thead, make them the relative container in which we can fix td and th as absolute

table tbody {
    position: relative;
}

table thead {
    position: relative;
}

//Make both the first header and first data cells (First column) absolute so that it sticks to the left

table td:first-of-type {
    position: absolute;
}

table th:first-of-type {
    position: absolute;
}

//Move Second column according to the width of column 1 

table td:nth-of-type(2) {
    padding-left: <Width of column 1>;
}

table th:nth-of-type(2) {
    padding-left: <Width of column 1>;
}

Answer 2

В качестве альтернативы, стилизуйте тело с заданным размером (например, через height:20em) и используйте overflow-y:scroll;

Тогда у вас может быть огромное тело, которое будет прокручиваться независимо от остальной части страницы.