ФОРУМ PS-Studio.Info

  • Страница 1 из 1
  • 1
Форум » Общий форум: Веб-дизайн » Готовые решения » Таблицы и табы » Таблица данных с горизонтальным скроллом (Эффект тени при горизонтальном скролле)
Таблица данных с горизонтальным скроллом
Дата: Пн, 23.04.2018, 18:51 Сообщение # 1
ps-studio
Администраторы



Реализация

В шапку сайта подключить:

Код
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/perfect-scrollbar.css">
<link rel="stylesheet" type="text/css" href="/css/main.css">


Код самой таблицы:

Код
<div class="limiter">
  <div class="container-table100">
   <div class="wrap-table100">
    <div class="table100 ver1">
     <div class="table100-firstcol">
      <table>
       <thead>
        <tr class="row100 head">
         <th class="cell100 column1">Employees</th>
        </tr>
       </thead>
       <tbody>
        <tr class="row100 body">
         <td class="cell100 column1">Brandon Green</td>
        </tr>

        <tr class="row100 body">
         <td class="cell100 column1">Kathy Daniels</td>
        </tr>

        <tr class="row100 body">
         <td class="cell100 column1">Elizabeth Alvarado</td>
        </tr>

        <tr class="row100 body">
         <td class="cell100 column1">Michael Coleman</td>
        </tr>

        <tr class="row100 body">
         <td class="cell100 column1">Jason Cox</td>
        </tr>

        <tr class="row100 body">
         <td class="cell100 column1">Christian Perkins</td>
        </tr>

        <tr class="row100 body">
         <td class="cell100 column1">Emily Wheeler</td>
        </tr>
       </tbody>
      </table>
     </div>
     
     <div class="wrap-table100-nextcols js-pscroll">
      <div class="table100-nextcols">
       <table>
        <thead>
         <tr class="row100 head">
                    <th class="cell100 column2">Position</th>
                    <th class="cell100 column3">Start date</th>
                    <th class="cell100 column4">Last Activity</th>
                    <th class="cell100 column5">Contacts</th>
                    <th class="cell100 column6">Age</th>
                    <th class="cell100 column7">Address</th>
                    <th class="cell100 column8">Card No</th>
         </tr>
        </thead>
        <tbody>
         <tr class="row100 body">
                    <td class="cell100 column2">CMO</td>
                    <td class="cell100 column3">16 Nov 2012</td>
                    <td class="cell100 column4">16 Nov 2017</td>
                    <td class="cell100 column5">brandon94@example.com</td>
                    <td class="cell100 column6">30</td>
                    <td class="cell100 column7">New York City, NY</td>
                    <td class="cell100 column8">424242xxxxxx6262</td>
         </tr>

         <tr class="row100 body">
                    <td class="cell100 column2">Marketing</td>
                    <td class="cell100 column3">16 Nov 2015</td>
                    <td class="cell100 column4">30 Nov 2017</td>
                    <td class="cell100 column5">kathy_82@example.com</td>
                    <td class="cell100 column6">26</td>
                    <td class="cell100 column7">New York City, NY</td>
                    <td class="cell100 column8">424242xxxxxx1616</td>
         </tr>

         <tr class="row100 body">
                    <td class="cell100 column2">CFO</td>
                    <td class="cell100 column3">16 Nov 2013</td>
                    <td class="cell100 column4">30 Nov 2017</td>
                    <td class="cell100 column5">elizabeth82@example.com</td>
                    <td class="cell100 column6">32</td>
                    <td class="cell100 column7">New York City, NY</td>
                    <td class="cell100 column8">424242xxxxxx5326</td>
         </tr>

         <tr class="row100 body">
                    <td class="cell100 column2">Designer</td>
                    <td class="cell100 column3">16 Nov 2013</td>
                    <td class="cell100 column4">30 Nov 2017</td>
                    <td class="cell100 column5">michael94@example.com</td>
                    <td class="cell100 column6">22</td>
                    <td class="cell100 column7">New York City, NY</td>
                    <td class="cell100 column8">424242xxxxxx6328</td>
         </tr>

         <tr class="row100 body">
                    <td class="cell100 column2">Developer</td>
                    <td class="cell100 column3">16 Nov 2017</td>
                    <td class="cell100 column4">30 Nov 2017</td>
                    <td class="cell100 column5">jasoncox@example.com</td>
                    <td class="cell100 column6">25</td>
                    <td class="cell100 column7">New York City, NY</td>
                    <td class="cell100 column8">424242xxxxxx7648</td>
         </tr>

         <tr class="row100 body">
                    <td class="cell100 column2">Sale</td>
                    <td class="cell100 column3">16 Nov 2016</td>
                    <td class="cell100 column4">30 Nov 2017</td>
                    <td class="cell100 column5">christian_83@example.com</td>
                    <td class="cell100 column6">28</td>
                    <td class="cell100 column7">New York City, NY</td>
                    <td class="cell100 column8">424242xxxxxx4152</td>
         </tr>

         <tr class="row100 body">
                    <td class="cell100 column2">Support</td>
                    <td class="cell100 column3">16 Nov 2013</td>
                    <td class="cell100 column4">30 Nov 2017</td>
                    <td class="cell100 column5">emily90@example.com</td>
                    <td class="cell100 column6">24</td>
                    <td class="cell100 column7">New York City, NY</td>
                    <td class="cell100 column8">424242xxxxxx6668</td>
         </tr>
        </tbody>
       </table>
      </div>
     </div>
    </div>
   </div>
  </div>
    </div>


В самом низу кода страницы подключить скрипты:

Код
  <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/perfect-scrollbar.min.js"></script>
    <script>
  $('.js-pscroll').each(function(){
   var ps = new PerfectScrollbar(this);

   $(window).on('resize', function(){
    ps.update();
   })

   $(this).on('ps-x-reach-start', function(){
    $(this).parent().find('.table100-firstcol').removeClass('shadow-table100-firstcol');
   });

   $(this).on('ps-scroll-x', function(){
    $(this).parent().find('.table100-firstcol').addClass('shadow-table100-firstcol');
   });

  });
    </script>
Прикрепления: 4796099.jpg(56.5 Kb)
профиль www Вверх
Форум » Общий форум: Веб-дизайн » Готовые решения » Таблицы и табы » Таблица данных с горизонтальным скроллом (Эффект тени при горизонтальном скролле)
  • Страница 1 из 1
  • 1
Поиск: