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

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Dmss83, 09.04.2012.

  1. Offline

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

    Регистрация:
    02.07.2011
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Очень интересную таблицу встретил на сайте http://www.severspasskblag.firef.ru/index.php?page=terrlist у нее "плавающая" шапка, кто-нибудь знает как такаю в joomla cделать?
     
  2.  
  3. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    это не от 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 нравится это.

Поделиться этой страницей

Загрузка...