Фиксированный столбец табличной верстки

Рейтинг: 0Ответов: 1Опубликовано: 11.12.2014

Вечер добрый, господа и дамы.

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

Нашла хитрое решение через создание дополнительного блока и наложения его на левую часть таблицы, где должно быть фиксированное меню, но что-то мне кажется это подозрительным и дай, думаю, спрошу у вас, возможно, кто такое уже делал и скажет иной выход (плагин, скрипт какой, или может я что-то в css упустила).

Скажу сразу, таблица имеет такой тип

<tbody>
    <table>
        <tr>
            <th>

Кто что скажет?

css html прокрутка
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Нужна такая разметка:

<div class="outer">
    <div class="inner">
        <table>
            <tbody>
                <tr>
                    <th></th>
                    <td></td>
                    <td></td>
...

И стили:

.outer {
    position: relative;
}
.inner {
    overflow-x: scroll;
    overflow-y: visible;
    width: 400px;
    margin-left: 100px; /* Сдвинет всю таблицу внутри на 100 пикселей */
}
table {
    width: 100%;
}
th {
    background-color: #0074d9;
    color: #fff;
    position: absolute;
    left: 0; /* Прижмет к левому краю .outer, который на 100 пикселей шире .inner */
    width: 100px; /* Занимаем отведенное место */
}

Посмотреть пример

p.s. <tbody> должен быть внутри <table>, а не снаружи.