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

mrwad

Создатель
Регистрация
28 Сен 2014
Сообщения
49
Реакции
9
Всем привет!

Не могу доработать таблицу, чтобы при просмотре на телефоне фиксировалась первый столбец. Сейчас таблица работает правильно и ее можно перелистывать на телефоне (в мобильной версии сайта), но хотелосьбы довести до совершенства и зафиксировать первый столбец. Пробовал разные варианты, но не получилось найти работающий. Нужен вариант именно на 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;
}

Заранее спасибо!
 
могу конечно жестоко ошибаться, но по моему без js такого не реализовать. В свое время тоже сильно озадачился подобным решением с фиксацией первого столбца и скролинга последующих, и нашел только с js. Вообще таблицы жутко архаичны, если сделать таблицу с использованием дивов с display:table можно реализовать куда больше, с помощью css в дивах можно вообще устраивать волшебство)
 
Первому столбцу задаёте position:fixed и ширину, а потом добавляете видимый при определённом разрешении столбец с шириной фиксируемого(чтобы вывести данные из-под фиксированного столбца).
Или я что-то не понял?
 
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,


Данным способом фиксируется верхняя строка, нужно только в мобильной версии сайта фиксировать первую колонку по вертикали.
 
Код:
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
Уберите уже тэг 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 стоит поиграться.
 
Уже и так и сяк пробовал, но никак толком не работает. Понимаю, что лыжи едут, дело скорее всего в другом :), но раз тему начал, надо продолжать, пока не заработает. Специально перенес все с локалхоста, чтобы долго не объяснять. Таблица меня полностью устраивает, даже тексты первой колонки корректно в мобильной версии строчки меняют. Единственное, что мне нужно, чтобы все оставалось в первозданном виде и блокировался на месте первый столбец (только в мобильной версии сайта!). Можно и с Явоскриптом, без разницы уже.


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


Спасибо большое!
 
Назад
Сверху