Статические строки и столбцы таблицы HTML с использованием CSS и JavaScript - PullRequest
Новая
       0

Статические строки и столбцы таблицы HTML с использованием CSS и JavaScript

0 голосов
/ 12 октября 2011

Я хотел бы иметь (как минимум) первый столбец моей HTML-таблицы в качестве статического столбца. Остальные столбцы должны прокручиваться горизонтально. Если таблица прокручивается по вертикали, статический столбец и другие столбцы должны прокручиваться вместе.

В более старых версиях IE вы могли использовать CSS-выражения для достижения этой цели. Пример можно найти по адресу http://www.javascripttoolbox.com/lib/scrollingdatagrid/.

Есть идеи, как преобразовать это в решение HTML, CSS и JavaScript (кросс-браузер)?

Это то, что я до сих пор придумал: 

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <div style="position: relative; display: block; width: 200px;">
        <div style="overflow-x: auto; border: 1px solid black; width: 200px; margin-left: 120px;">
            <table>
                <tbody>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                </tbody>
            </table>
        </div></div>
            </div>
    </body>
</html>

Ответы [ 4 ]

1 голос
/ 12 октября 2011

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

1 голос
/ 12 октября 2011

Следующий код работает с горизонтальной прокруткой: 

<html>
<head>
<style>
.grid { width: 300px; height: auto; overflow: auto; }
.grid td.static { width: 100px; position: fixed; background-color: white; }
.grid td.dynamic { width: 100px; }
.grid td { border: solid 1px black; }
.grid table { width: 500px; }
</style>
</head>
<body>
  <div class='grid'>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td class='static'>Header 1</td>
        <td class='dynamic c1'>Cell 1A</td>
        <td class='dynamic c2'>Cell 1B</td>
        <td class='dynamic c3'>Cell 1C</td>
        <td class='dynamic c4'>Cell 1D</td>
      </tr>
      <tr>
        <td class='static'>Header 2</td>
        <td class='dynamic c1'>Cell 2A</td>
        <td class='dynamic c2'>Cell 2B</td>
        <td class='dynamic c3'>Cell 2C</td>
        <td class='dynamic c4'>Cell 2D</td>
      </tr>
      <tr>
        <td class='static'>Header 3</td>
        <td class='dynamic c1'>Cell 3A</td>
        <td class='dynamic c2'>Cell 3B</td>
        <td class='dynamic c3'>Cell 3C</td>
        <td class='dynamic c4'>Cell 3D</td>
      </tr>
      <tr>
        <td class='static'>Header 4</td>
        <td class='dynamic c1'>Cell 4A</td>
        <td class='dynamic c2'>Cell 4B</td>
        <td class='dynamic c3'>Cell 4C</td>
        <td class='dynamic c4'>Cell 4D</td>
      </tr>
    </table>
  </div>
</body>
</html>
0 голосов
/ 13 октября 2011

Мне кажется, я нашел решение, которое работает как в IE, так и в Chrome: 

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js"></script>
        <script type="text/javascript">
            function scrollTable() {
                var column1 = $("#dailyWorkColumn1");
                var column2 = $("#dailyWorkColumn2");
                column1.scrollTop(column2.scrollTop());
                }

            $(document).ready(function() {
                var column2 = $("#dailyWorkColumn2");
                var column2right = $('#dailyWorkColumn2 tbody td:nth-child(2)')[0].offsetLeft;
                column2.scrollLeft(column2right);
                });
        </script>
        <style type="text/css">
            .dailyWorkColumn1 { overflow: hidden; width: 100px; height: 280px; border: 1px solid blue; position: absolute; left: 10px; top: auto; }
            .dailyWorkColumn2 { overflow: auto; border: 1px solid red; margin-left: 102px; height: 300px; width: 400px; }
        </style>
    </head>
    <body>
       <div style="overflow-y: visible; overflow-x: hidden; border: 1px solid black;">
            <div class="dailyWorkColumn1" id="dailyWorkColumn1">
                <table style="width: 100px;">
                    <tr>
                        <td style="border: 1px solid purple;">Jason</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Jeff</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Dave</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Mike</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Michael</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Lori</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Ashley</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Sean</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Louis</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Chris</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Aaron</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Marie</td>
                    </tr>
                </table>
            </div>
            <div class="dailyWorkColumn2" id="dailyWorkColumn2" onscroll="scrollTable();">
                <table>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            123456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            223456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            323456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            423456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            523456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            623456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            723456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            823456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            923456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            103456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            113456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            123456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                </table>
            </div>
       </div> 
    </body>
</html>
0 голосов
/ 12 октября 2011

Может быть, не лучшее решение, но что пришло мне в голову, когда я увидел ваш пример:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...