Jump to content
  • 0

Таблица. Фиксированный заголовок, столбец.


user89
 Share

Question

Для сводных отчетов нужно, чтобы несколько колонок слева и заголовок оставались на месте, а данные прокручивались. Находил много решений, но они использовали библиотеки типа jQuery или были сложны в реализации (не учитывалось объединение ячеек)

Мне хотелось сделать что-то универсальное и простое. Вроде получилось :)     Области фиксируются вызовом функции

FixHeaderCol(<таблица>, <сколько фиксировать строк>, <сколько фиксировать столбцов>, <ширина таблицы>, <высота таблицы>)

Успешно работает в IE10, новой Опере, Мозилле, Хроме.

Демо https://jsfiddle.net/axeqojwu/1/embedded/result/

Исходники с комментариями http://jsfiddle.net/axeqojwu/1/

 

З.Ы. Функция setSum в реальных проектах не нужна, она заполняет пустые ячейки случайными числами

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Ага. Колёсико не работает. Будет время, попробую сделать.

 

>> В последнем примере однопиксельный скролл.

Да, в IE появляется скролл, надо было высоту вместо 147px сделать 150px. А еще лучше, типа

if (rowFix == 0) {<автоподсчет высоты контейнера>}
Edited by user89
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Shoker2
      Вот мой код:
      <table class="down_table_main" bgcolor="#F7F7F7">     <tr>         <td><button class="down_button_main">Подробнее</button></td>     </tr> </table> Почему-то когда я использую align, ничего не происходит. А в другом коде align работает.
      <table border="0" bgcolor="white" width="800px">     <tr align="center">         <td>             <br>             <img src="https://ru-minecraft.ru/uploads/posts/2018-03/medium/1522109759_cosmicnpcs.jpg" alt="">             <h3>Мод <b>CosmicNPCs</b> - создайте второго игрока и запишите, что он будет делать.</h3>             <p>Интересный мод который позволит снимать ролики без участия других игроков, вы сможете записать свои движения и действия, а потом воспроизвести с произвольным скином, таким образом для записи каких то прикольных моментов вам не нужен второй игрок.</p>         </td>     </tr> </table>  
    • By dimanchick20
      Тег Header не может на всю ширину, поставил width 100%. Что делать?
      Вот CSS header{     width: 100%;                                               height: 150px;     text-align: left;     background: black;     border-radius: 2px;     line-height:66.66666px;     -webkit-user-select: none;     -khtml-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     -o-user-select: none;     user-select: none; }       Вот HTML     <Header>       <a href="">Сумки</a>       <a href="">Платье</a>       <a href="">Свитер</a>       <a href="">Костюм</a>       <a href="">Кофта</a>       <a href="">Пиджак</a>       <a href="">Штаны</a>     </Header>
    • By Tanya2021
      Не могу закруглить углы у background-color. В чем проблема? 



    • By HypestHypest
      недавно начал изучать html css, вроде все понятно, но не могу сообразить как правильно сверстать такой header. помогите примером

    • By Evsey
      Доброго дня всем матерым верстальщикам.
      Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями.
      А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил.
      Каркас table tr td без объединения ячеек могу сделать, но нужно объединить.
      Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy