Крайне интересная таблица

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by Dmss83, Apr 9, 2012.

  1. Offline

    Dmss83 Недавно здесь

    Joined:
    Jul 2, 2011
    Messages:
    10
    Likes Received:
    0
    Gender:
    Male
    Очень интересную таблицу встретил на сайте http://www.severspasskblag.firef.ru/index.php?page=terrlist у нее "плавающая" шапка, кто-нибудь знает как такаю в joomla cделать?
     
  2.  
  3. doctorgrif
    Offline

    doctorgrif Местный => Cпециалист <=

    Joined:
    Jan 14, 2008
    Messages:
    1,284
    Likes Received:
    66
    Gender:
    Male
    это не от cms зависит, а от знания html/css/js
    1. делаем кошерный скрипт
    Код (CODE):
    1. <script type="text/javascript">
    2.     $(function() {
    3.         var offset = $("#fixed").offset(); // вот это замечаем, потом будет это нам мерещиться
    4.         var topPadding = 0;
    5.         $(window).scroll(function() {
    6.             if ($(window).scrollTop() > offset.top) {
    7.                 $("#fixed").stop()
    8.                             .animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
    9.             }
    10.             else {$("#fixed").stop().animate({marginTop: 0});};});
    11.     });
    12. </script>

    2. делаем не менее кошерную ОТДЕЛЬНУЮ таблицу с заголовком нужных столбцов целевой таблицы
    Код (CODE):
    1. <table id="fixed" style="text-align:center;position:absolute;background-attachment:scroll;background-repeat:repeat;background-image:none;background-position:0% 0%;background-size:auto;background-origin:padding-box;background-clip:border-box;background-color:#fff;z-index:2;width:900px;" border="1" cellspacing="0" cellpadding="0">
    2. <tbody>
    3. <tr>
    4. <td style="height:120px;width:300px;">
    5. <p>Наименование сельского поселения></p>
    6. </td>
    7. <td style="background-color:#fff;width:275px;">
    8. <p>Перечень сельских населенных пунктов, входящих в сельское поселение</p>
    9. </td>
    10. <td style="background-color:#fff;width:325px;">
    11. <p>Ответственный священник</p>
    12. </td>
    13. </tr>
    14. </tbody>
    15. </table>

    3. вставляем основную таблицу, но уже без "шапки, чтобы вы таки были здоровы
    Код (CODE):
    1. <table>
    2. ...
    3. </table>

    4. profit

    либо п.1 заварачиваем в отдельный файл и вызываем его напрямую из шаблона
     
    Dmss83 likes this.

Share This Page

Loading...