CSS: зафиксировать заголовок таблицы и первый столбец *но только на определенных осях*

У меня есть вариант общего вопроса, и я постараюсь объяснить его как можно лучше. С вашей стороны может потребоваться некоторая визуализация. У меня есть таблица HTML (на самом деле есть таблицы внутри таблиц внутри div внутри таблиц - я использую плагин JSGantt). Я бы хотел, чтобы заголовок таблицы фиксировался только при прокрутке вниз по оси Y, но если мне нужно прокрутить вправо, чтобы увидеть больше данных, я бы хотел, чтобы он прокручивался вправо.

Между тем, когда я прокручиваю вниз (с оставленной строкой заголовка), я бы хотел, чтобы первый столбец таблицы прокручивался вниз вместе со мной. Но когда я прокручиваю вправо, я хочу, чтобы первый столбец оставался на месте (но, как я уже упоминал выше, строка заголовка прокручивалась вместе со мной). Таким образом, я заморозил первый столбец только по оси X, а строку заголовка — только по оси Y.

Я пока остановлюсь на этом. Если кому-то нужны дополнительные разъяснения, я могу попытаться объяснить. Я пробовал это несколькими способами, но я убежден, что это невозможно без серьезного Javascript. Таблица, кстати, содержится во внешнем div с заданными размерами, поэтому мне нужно прокручивать данные.

Любая помощь, которую вы можете предоставить, будет принята с благодарностью.


person MegaMatt    schedule 26.05.2010    source источник
comment
+1, но я убежден, что это невозможно без серьезного javascript   -  person mVChr    schedule 26.05.2010


Ответы (1)


Этот тип макета поможет вам на вашем пути. Обратите внимание, что будет много форматирования размера ячеек, чтобы они совпадали.

<div id="TableHeaderDiv">
    <table id="TableHeader">
        <thead>
            <tr>
                <th style="width:100px"> Column1 </th>
                <th style="width:100px"> Column2 </th>
                <th style="width:100px"> Column3 </th>
            </tr>
        <thead>
    </table>
</div>
<div id "TableBodyMainDiv" style="overflow-y:auto">
  <div id="TableBodyLeftDiv" style="float:left">
     <table id="TableBody">
        <tbody>
            <tr>
                        <td style="width:100px"> Column2Value </td>
                <td style="width:100px"> Column3Value </td>
            </tr>
            <!-- More rows here -->
        <tbody>
    </table>

  </div>
  <div id="TableBodyDiv" style="float:left; overflow-x: auto">
    <table id="TableBody">
        <tbody>
            <tr>
                        <td style="width:100px"> Column2Value </td>
                <td style="width:100px"> Column3Value </td>
            </tr>
            <!-- More rows here -->
        <tbody>
    </table>
  </div>
</div>

вероятно, захочется изменить ширину tds, используя классы CSS или Javascript.

person John Hartsock    schedule 26.05.2010
comment
Я не думаю, что это то, что он имеет в виду. Если я правильно его понимаю, он хочет иметь возможность разбивать столбцы по вертикали и отключать левый столбец (например, столбец имени), чтобы этот столбец оставался видимым при горизонтальной прокрутке. То, что у вас есть, этого не сделает. - person Robusto; 26.05.2010