Таблица с фиксированным первым столбцом CSS + HTML

mrwad · 7 Янв 2017

Всем привет!

Не могу доработать таблицу, чтобы при просмотре на телефоне фиксировалась первый столбец. Сейчас таблица работает правильно и ее можно перелистывать на телефоне (в мобильной версии сайта), но хотелосьбы довести до совершенства и зафиксировать первый столбец. Пробовал разные варианты, но не получилось найти работающий. Нужен вариант именно на CSS + HTML, без Яваскрипта.

Для просмотра ссылки Войди или Зарегистрируйся

HTML:

Код:

<div class="table-container">
    <table class="data-table">
        <thead>
            <tr>
                <th> </th>
                <th> </th>
                <th><center>Parameter S</center></th>
                <th><center>Parameter S</center></th>
                <th><center>Parameter S</center></th>
                <th><center>Parameter S</center></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Parameter 1</td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
            </tr>  
            <tr>
                <td>Parameter 2</td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
            </tr>  
            <tr>
                <td>Parameter 3</td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
            </tr>  
            <tr>
                <td>Parameter 3</td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
            </tr>  
            <tr>
                <td>Parameter 4</td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
            </tr>  
                        <tr>
                <td>Parameter 5</td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
            </tr>
                        <tr>
                <td>Parameter 6</td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
            </tr>
                        <tr>
                <td>Parameter 7</td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
            </tr>
                        <tr>
                <td>Parameter 8</td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
                <td><center>m2</center></td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

Код:

.table-container{
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 900px){
    .table-container {
        overflow: visible;
    }
}

.table-container body{
    padding: 1em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #222;
}
.table-container table{
    border-collapse: collapse;
    border-spacing: 0;
    background-color: white;
    width: 100%;
    border: 0px solid #620376;
}
.table-container th, td{
    padding: 0.25em 0.75em;
    text-align: left;
}
.table-container th{
    background-color: #000000;
    white-space: nowrap;
    color: white;
}
.table-container td{
    border-top: 1px solid #000000;
}
tr:nth-child(even) {
    background-color: #929292;
}

Заранее спасибо!

zALEHANz · 8 Янв 2017

могу конечно жестоко ошибаться, но по моему без js такого не реализовать. В свое время тоже сильно озадачился подобным решением с фиксацией первого столбца и скролинга последующих, и нашел только с js. Вообще таблицы жутко архаичны, если сделать таблицу с использованием дивов с display:table можно реализовать куда больше, с помощью css в дивах можно вообще устраивать волшебство)

Iga · 8 Янв 2017

Первому столбцу задаёте position:fixed и ширину, а потом добавляете видимый при определённом разрешении столбец с шириной фиксируемого(чтобы вывести данные из-под фиксированного столбца).
Или я что-то не понял?

mrwad · 9 Янв 2017

lga,

Таким образом? Пробовал, почему-то не работает.

.fixed{
position: fixed;
width: 200px;
}

Код:

.table-container{
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 900px){
    .table-container {
        overflow: visible;
    }
}

.fixed{
position: fixed;
width: 200px;
}

.table-container body{
    padding: 1em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #222;
}
.table-container table{
    border-collapse: collapse;
    border-spacing: 0;
    background-color: white;
    width: 100%;
    border: 0px solid #620376;
}
.table-container th, td{
    padding: 0.25em 0.75em;
    text-align: left;
}
.table-container th{
    background-color: #000000;
    white-space: nowrap;
    color: white;
}
.table-container td{
    border-top: 1px solid #000000;
}
tr:nth-child(even) {
    background-color: #929292;
}

shake1,

Данным способом фиксируется верхняя строка, нужно только в мобильной версии сайта фиксировать первую колонку по вертикали.

mforve · 9 Янв 2017

Код:

tbody tr td:first-of-type {
  position: fixed;
  width: 200px;
}
tbody tr td:nth-of-type(2) {
  padding-left: 200px;
}

Что первое в голову пришло бекграунд задать ячейкам придется еще.
Ну и соответственно, если только для мобильных воспользуйтесь медиа запросами @media (max-width: 768px)

Если не понятно, пиши, распишу подробнее.

Iga · 9 Янв 2017

Уберите уже тэг center - это откровенно архаично и пошло.

Код:

.table-container td{
    border-top: 1px solid #000000;
    text-align: center;
}

Далее шаманим с ячейками и медиа запросом. Вот, что я поменял:

Код:

<table class="data-table">
        <thead>
            <tr>
                <th> </th>
                <th> </th>
                <th>Parameter S</th>
                <th>Parameter S</th>
                <th>Parameter S</th>
                <th>Parameter S</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="par">Parameter 1</td>
                <td class="empty"></td>
                <td>m2</td>
                <td>m2</td>
                <td>m2</td>
                <td>m2</td>
                <td>m2</td>
            </tr>
        </tbody>
    </table>

.par {
    width: 81px;
    display: block;
    position: fixed;
    background: #fff;
}
.empty {
    width: 100px;
    display: block;
}
@media screen and (min-width: 900px){
   .empty {
    display: none;
}
}

Запускается на всём, даже на осле 8+.
C min-width стоит поиграться.

mrwad · 15 Янв 2017

Уже и так и сяк пробовал, но никак толком не работает. Понимаю, что лыжи едут, дело скорее всего в другом

, но раз тему начал, надо продолжать, пока не заработает. Специально перенес все с локалхоста, чтобы долго не объяснять. Таблица меня полностью устраивает, даже тексты первой колонки корректно в мобильной версии строчки меняют. Единственное, что мне нужно, чтобы все оставалось в первозданном виде и блокировался на месте первый столбец (только в мобильной версии сайта!). Можно и с Явоскриптом, без разницы уже.

Ссылка на сайт:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Спасибо большое!

Таблица с фиксированным первым столбцом CSS + HTML

mrwad

Создатель

zALEHANz

Постоялец

Iga

Гуру форума

mrwad

Создатель

mforve

Создатель

Iga

Гуру форума

mrwad

Создатель