tabele responsywne

Plugin jQuery:

Foo table

przekształca tabele w tabele responsywne, poprzez nadanie priorytetów poszczególnych elementów, tabela wyświetla w pierwszym widoku tylko treści o największym priorytecie, po skorzystaniu z opcji rozwiń dane (+) ukazuje się cała zawartość.

Domyślnie zastosowane są dwa punkty zmiany: phone – 480px i tablet – 1024px.

Działanie pluginu opiera się na atrybutach danych wpisywanych w znacznikach <th>, podczas tworzenia tabeli zostają zaznaczone które kolumny będą ukryte na telefonach i tabletach. Najważniejsze atrybuty danych:

  • data-class – określa klasę css która zostaje przypisana komórkom kolumny
  • data-hide – definiuje punkt zmiany przy których kolumna zostaje ukryta (data-hide=”phone, tablet”)
  • data-ignore – ukrywa wybrane treści w przypadku wyświetlenia informacji szczegółowych (data-ignore=”true”)
  • data-sort-initial – elementy sortowane w kolumnie (data-sort-initial=”true”)
  • data-sort-ignore – kolumny w których sortowanie nie ma być dodane (data-sort-ignore=”true”)
  • data-filter – pozwala na dodanie pola input z wyszukiwaniem po zawartości tabeli (<input id=”myFilter” type=”text”> <th data-filter=”#myFilter”>) – działa po dodaniu rozszerzenia do pluginu

podanie własnych wartości punktów zmiany:

<script type="text/javascript">
  $(function(){
    $(".myTable").footable({ 
      breakpoints; {
        tablet:790,
        smartphone:490,
        mini:310
      }
    });
  });
</script>

dodanie paginacji poprzez dodanie klasy pagination (obowiązkowa) pozostałe opcje są opcjonalne:


<tfoot>
 <tr>
  <td colspan="6">
   <div class="pagination-centered hide-if-no-paging pagination"></div>
  </td>
 </tr>
</tfoot>

 

Stacked tables

plugin wykonuje kopię tabeli i przekształca ją do dwukolumnowego formatu klucz-wartość lepiej wypadającego na małych ekranach.

 

Responsive tables

zablokowanie pierwszej kolumny a możliwość przewijania kolejnych za pomocą responsive-tables.js lub dzięki stylom css gdzie dodatkowo można zamienić kolejność nagłówków kolumn i umieścić je w pierwszej kolumnie.


<style type="text/css">
  body{font-family: Helvetica, Arial}

  table {
    border-collapse: collapse;
    width: 100%;
  }
  table td, table th {
    padding: 9px 10px;
    text-align: left;
  }
  @media only screen and (max-width: 767px){
    table{
      display:block;
      position:relative;
    }
    table thead{
      display:block;
      float:left;
    }
    table tbody{
      display:block;
      width:auto;
      position:relative;
      overflow-x:auto;
      white-space:nowrap;
    }
        
    table thead tr{
      display:block;
    }
    table th{
      display:block;
      border:0px;
      border-top:1px solid #ccc;
      padding:8px 10px !important;
    }
    table tbody tr{
      display:inline-block;
      vertical-align:top;
      border-right:1px solid #ccc;
    }
    table td{
      display:block;
      min-height:19px;
      border:0;
    }
    table th:first-child{
      border:none;
    }
  }
</style>


<table cellpadding="0" cellspacing="0" border="1" width="100%">
 <thead>
  <tr>
   <th>Nr</th>
    <th>Mountain:</th>
    <th>Elevation:</th>
    <th>Continent:</th>
    <th>First ascenders:</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>Everest</td>
   <td>8,848 m</td>
   <td>Asia</td>
   <td>Tenzing Norgay</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Aconcagua</td>
   <td>6,962 m</td>
   <td></td>
   <td>Matthias Zurbriggen</td>
  </tr>
  <tr>
   <td>3</td>
   <td>Denali</td>
   <td>6,194 m</td>
   <td>North America</td>
   <td>Harry Karstens</td>
  </tr> 
  <tr>
   <td>4</td>
   <td>Kilimanjaro</td>
   <td>5,895 m</td>
   <td>Africa</td>
   <td>Ludwig Purtscheller</td>
  </tr> 
  <tr>
   <td>5</td>
   <td>Vinson</td>
   <td>4,892 m</td>
   <td>Antarctica</td>
   <td>Nicholas Clinch</td>
  </tr> 
  <tr>
   <td>6</td>
   <td>Blanc</td>
   <td>4,810 m</td>
   <td>Europe</td>
   <td>Jacques Balmat</td>
  </tr>
  <tr>
   <td>7</td>
   <td>Kosciuszko</td>
   <td>2,228 m</td>
   <td>Australia</td>
   <td>Paweł Strzelecki</td>
  </tr>
 </tbody> 
</table>

#table