CSS: заморозить заголовок таблицы и первый столбец, * но только на определенных осях * - PullRequest
Новая
       10

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

2 голосов
/ 26 мая 2010

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

Тем временем, когда я прокручиваю вниз (строка заголовка остается на месте), я бы хотел, чтобы первый столбец таблицы прокрутился вниз со мной. Но когда я прокручиваю вправо, я хочу, чтобы первый столбец оставался на месте (но, как я упоминал выше, строка заголовка прокручивается вместе со мной). По сути, я заморозил первый столбец только по оси x, а строку заголовка - только по оси y.

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

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

1 Ответ

0 голосов
/ 26 мая 2010

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

<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

...