jQuery « Зафиксировать столбец таблицы

Каким образом можно зафиксировать столбец(столбцы) таблицы а остальное ее содержимое прокручивать скроллом.
Спасибо. :)
0
html javascript jquery

1 ответов

Переделанный чужой пример.
Откуда взят не помню (не сохранил ссылку)
Первоначально имел только фиксированный заголовок.
В данном варианте (автор d_i_g@list.ru):
Фиксированный заголовок и первый столбец.
Сама таблица не имеет ссылок на классы (ранее нужно было прописывать).
Дизайн утрирован специально чтобы показать, что если убрать -2 - появляется мусор. Должен работать в IE 8.0 (но вероятно нужны какие то разрешения, которые у автора релиза уже были установлены):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
        <meta http-equiv="content-type" content="text/html; charset=WIN1251" />
        <title>Скроллируемая Таблица. Шаг 3</title>
  <link rel="stylesheet" href="/example/examples.css" type="text/css" />
        <style type="text/css">
        .scroll-table {
                width: 90%;
                overflow: scroll;
                height: 300px;
                position: relative;
        }
        .scroll-table td {
                padding: 5px;
                border: 3;
                border-collapse: separate;
                border-color: red blue;
                border-style: solid;
        }
        .scroll-table th {
                background: #eee;
                padding: 5px;
                border: 3;
                border-collapse: separate;
                border-color: red blue;
                border-style: solid;
        }
 
       .scroll-table thead tr {
                position: relative;
                z-index: 2;
                top: expression( this.parentElement.parentElement.parentElement.scrollTop-2);
        }
        .scroll-table th:first-child {
                position: relative;
                background: #aaa;
                left: expression( this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2);
        }
 
        .scroll-table tbody {
                height: 15px;
                overflow-x: scroll;
                overflow-y: scroll;
        }
        .scroll-table td:first-child {
                position: relative;
                background: #ddd;
                left: expression( this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2);
        }
</style>
</head>
<body>
<div id="container" style="width:50%">
<div class="scroll-table">
<table width="97%">
<thead>
        <tr>
                <th>Название позиции</th>
                <th>Бренд</th>
                <th>Стоимость</th>
                <th>Оптовое количество</th>
                <th>Количество</th>
        </tr>
</thead>
<tbody>
        <tr>
                <td>05D391K (FNR05K391) варистор, d=5мм,    V=390В</td>
                <td>TWN</td>
                <td>0,035 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>14D271K (FNR14K271) варистор, d=14мм,    V=270В</td>
                <td>TWN</td>
                <td>0,091 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>05D390K (FNR05K390) варистор, d=5мм,    V=39В</td>
                <td>TWN</td>
                <td>0,037 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>14D241K (FNR14K241) варистор, d=14мм,    V=240В</td>
                <td>TWN</td>
                <td>0,091 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>05D331K (FNR05K331) варистор, d=5мм,    V=330В</td>
                <td>TWN</td>
                <td>0,035 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>14D151K (FNR14K151) варистор, d=14мм,    V=150В</td>
                <td>TWN</td>
                <td>0,088 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>05D271K (FNR05K271) варистор, d=5мм,    V=270В</td>
                <td>TWN</td>
                <td>0,035 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>10D911K (FNR10K911) варистор, d=10мм,    V=910В</td>
                <td>TWN</td>
                <td>0,091 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>05D241K (FNR05K241) варистор, d=5мм,    V=240В</td>
                <td>TWN</td>
                <td>0,035 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>10D820K (FNR10K820) варистор, d=10мм,    V=82В</td>
                <td>TWN</td>
                <td>0,057 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>05D221K (FNR05K221) варистор, d=5мм,    V=220В</td>
                <td>TWN</td>
                <td>0,035 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>10D781K (FNR10K781) варистор, d=10мм,    V=780В</td>
                <td>TWN</td>
                <td>0,069 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>05D181K (FNR05K181) варистор, d=5мм,    V=180В</td>
                <td>TWN</td>
                <td>0,035 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>10D751K (FNR10K751) варистор, d=10мм,    V=750В</td>
                <td>TWN</td>
                <td>0,069 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>05D121K (FNR05K121) варистор, d=5мм,    V=120В</td>
                <td>TWN</td>
                <td>0,035 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>10D681K (FNR10K681) варистор, d=10мм,    V=680В</td>
                <td>TWN</td>
                <td>0,069 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
        <tr>
                <td>10D680K (FNR10K680) варистор, d=10мм,    V=68В</td>
                <td>TWN</td>
                <td>0,057 USD</td>
                <td>200</td>
                <td>200</td>
        </tr>
</tbody>
</table>
</div>
 
</div>
 
</body>
</html>

 
0

Если иметь 2 таблицы, сделать не сложно... даже JS не надо. Одна таблица стоит мертво, а вторая скроллится.
Например так:

<table border=1 height=80px style="float:left">
  <tr><td>line0</td></tr>
  <tr><td>line1</td></tr>
  <tr><td>line2</td></tr>
</table>

<div style="height:80px;width:60px;overflow:auto;">
<table border=1>
  <tr><td>line0</td></tr>
  <tr><td>line1</td></tr>
  <tr><td>line2</td></tr>
  <tr><td>line3</td></tr>
  <tr><td>line4</td></tr>
  <tr><td>line5</td></tr>
  <tr><td>line6</td></tr>
<table>
</div>

 
0