0
Welcome Guest! Login
0 items Join Now

Creating a Responsible Table, i.e. Responsive

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3224
    • Custom work done

    Creating a Responsible Table, i.e. Responsive

    Posted 4 years 4 months ago
    • Tables are not considered part of the class called responsive content so it's up to the user to either CSS a solution or use a 3rd party app to generate responsive tables.

      Here at Rockettheme our latest templates have a set of Table classes that can really snazz up your tables. However that still leaves us with the responsive issue.

      For this guide I have used a neat CSS solution devised by Chris Coyier - Responsive Data Tables .

      So here is the HTML content for a six column table with headers that would go in your article or module:
      <div id="tbl-resp">
          <table class="table table-striped table-bordered table-hover">
              <thead>
                  <tr>
                      <th>Module Name</th>
                      <th>Heading 2</th>
                      <th>Heading 3</th>
                      <th>Heading 4</th>
                      <th>Heading 5</th>
                      <th>Heading 6</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>RokAjaxSearch</td>
                      <td>
                          <a href="http://demo.rockettheme.com/joomla-extensions/rokajaxsearch/" target="_blank">Demo<a></td>
      		<td><a href="http://www.rockettheme.com/joomla/extensions/rokajaxsearch/modal/downloads" data-modal="">Download</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/forum/joomla-extension-rokajaxsearch" target="_blank">Support</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/joomla/extensions/rokajaxsearch/modal/changelog" data-modal="">Changelog</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/docs/joomla/extensions/rokajaxsearch" target="_blank">Documentation</a>
                      </td>
                  </tr>
                  <tr class="success">
                      <td>RokBox</td>
                      <td>
                          <a href="http://demo.rockettheme.com/joomla-extensions/rokbox/" target="_blank">Demo<a></td>
      		<td><a href="http://www.rockettheme.com/joomla/extensions/rokbox/modal/downloads" data-modal="">Download</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/forum/joomla-extension-rokbox" target="_blank">Support</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/joomla/extensions/rokbox/modal/changelog" data-modal="">Changelog</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/docs/joomla/extensions/rokbox" target="_blank">Documentation</a>
                      </td>
                  </tr>
                  <tr class="error">
                      <td>RokGallery</td>
                      <td>
                          <a href="http://demo.rockettheme.com/joomla-extensions/rokgallery/" target="_blank">Demo<a></td>
      		<td><a href="http://www.rockettheme.com/joomla/extensions/rokgallery/modal/downloads" data-modal="">Download</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/forum/joomla-extension-rokgallery" target="_blank">Support</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/joomla/extensions/rokgallery/modal/changelog" data-modal="">Changelog</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/docs/joomla/extensions/rokgallery" target="_blank">Documentation</a>
                      </td>
                  </tr>
                  <tr class="warning">
                      <td>RokPad</td>
                      <td>
                          <a href="#">Demo<a></td>
      		<td><a href="http://www.rockettheme.com/joomla/extensions/rokpad/modal/downloads" data-modal="">Download</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/forum/joomla-extension-rokpad" target="_blank">Support</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/joomla/extensions/rokpad/modal/changelog" data-modal="">Changelog</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/docs/joomla/extensions/rokpad" target="_blank">Documentation</a>
                      </td>
                  </tr>
                  <tr class="info">
                      <td>RokSprocket</td>
                      <td>
                          <a href="http://demo.rockettheme.com/joomla-extensions/roksprocket/" target="_blank">Demo<a></td>
      		<td><a href="http://www.rockettheme.com/joomla/extensions/roksprocket/modal/downloads" data-modal="">Download</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/forum/joomla-extension-roksprocket" target="_blank">Support</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/joomla/extensions/roksprocket/modal/changelog" data-modal="">Changelog</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/docs/joomla/extensions/roksprocket" target="_blank">Documentation</a>
                      </td>
                  </tr>
                  <tr>
                      <td>RokWeather</td>
                      <td>
                          <a href="http://demo.rockettheme.com/joomla-extensions/rokweather/" target="_blank">Demo<a></td>
      		<td><a href="http://www.rockettheme.com/joomla/extensions/rokweather/modal/downloads" data-modal="">Download</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/forum/joomla-extension-rokweather" target="_blank">Support</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/joomla/extensions/rokweather/modal/changelog" data-modal="">Changelog</a>
                      </td>
                      <td>
                          <a href="http://www.rockettheme.com/docs/joomla/extensions/rokweather" target="_blank">Documentation</a>
                      </td>
                  </tr>
              </tbody>
          </table>
      </div>

      Basically ANY table that you want to be responsive, just wrap it in this <div>:
      <div id="tbl-resp">
          table code.....
      <div>

      Here is what a page looks like with a Responsive table at the top and a non-responsive table at the bottom:

      This image is hidden for guests.
      Please log in or register to see it.


      Here is the CSS that goes in your rt_templateName-custom.css <-{Click the LINK } :
      /* 
      Max width before this PARTICULAR table gets nasty
      This query will take effect for any screen smaller than 760px
      and also iPads specifically.
      */
      @media 
      only screen and (max-width: 760px),
      (min-device-width: 768px) and (max-device-width: 1024px)  {
       
        /* Force table to not be like tables anymore */
        div#tbl-resp table, div#tbl-resp thead, div#tbl-resp tbody, div#tbl-resp th, div#tbl-resp td, div#tbl-resp tr { 
          display: block; 
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
        div#tbl-resp thead tr { 
          position: absolute;
          top: -9999px;
          left: -9999px;
        }
        
        div#tbl-resp tr { border: 1px solid #ccc; }
        
        div#tbl-resp td { 
          /* Behave  like a "row" */
          border: none;
          border-bottom: 1px solid #eee; 
          position: relative;
          padding-left: 5%; 
        }
        
        div#tbl-resp td:before { 
          /* Now like a table header */
          position: absolute;
          /* Top/left values mimic padding */
          top: 6px;
          left: 6px;
          width: 45%; 
          padding-right: 10px; 
          white-space: nowrap;
        }
      } 	

      So the view in Desktop mode:

      This image is hidden for guests.
      Please log in or register to see it.


      The view in portrait Tablet mode:

      This image is hidden for guests.
      Please log in or register to see it.


      Finally in Mobile mode:

      This image is hidden for guests.
      Please log in or register to see it.



      Pre BootStrap templates :

      If you have a pre-Bootstrap template (i.e. your RocketLauncher install doesn't show a Tables section on the TYPOGRAPHY page) then you can add this to make up for the missing BootStrap and Rockettheme table classes.

      In your
      rt_templateName-custom.css <-{Click the LINK }
      file add this:
      able {
        max-width: 100%;
        background-color: transparent;
        border-collapse: collapse;
        border-spacing: 0;
      }
      
      table {
        border-collapse: collapse;
      }
      table.table-bordered {
        border-collapse: separate;
        *border-collapse: collapse;
      }
      table.table-bordered th {
        background-color: #f2f2f2;
      }
      .table-striped tbody tr:nth-child(2n+1) td,
      .table-striped tbody tr:nth-child(2n+1) th {
        background: #eaeaea;
      }
      .well {
        background-color: transparent;
        border: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
      }
      .nav-tabs.nav-stacked > li > a {
        background-color: #f2f2f2;
      }
      .nav-tabs.nav-stacked > li > a:hover {
        background-color: #eaeaea;
      }
      .list-striped li:nth-child(odd),
      .list-striped dd:nth-child(odd),
      .row-striped .row:nth-child(odd),
      .row-striped .row-fluid:nth-child(odd),
      .cat-list-row0 {
        background-color: #f2f2f2;
      }
      .list-striped li:hover,
      .list-striped dd:hover,
      .row-striped .row:hover,
      .row-striped .row-fluid:hover,
      .cat-list-row0:hover,
      .cat-list-row1:hover {
        background-color: #eaeaea;
      }
      
      .table {
        width: 100%;
        margin-bottom: 20px;
      }
      .table th,
      .table td {
        padding: 8px;
        line-height: 20px;
        text-align: left;
        vertical-align: top;
        border-top: 1px solid #ddd;
      }
      .table th {
        font-weight: bold;
      }
      .table thead th {
        vertical-align: bottom;
      }
      .table caption + thead tr:first-child th,
      .table caption + thead tr:first-child td,
      .table colgroup + thead tr:first-child th,
      .table colgroup + thead tr:first-child td,
      .table thead:first-child tr:first-child th,
      .table thead:first-child tr:first-child td {
        border-top: 0;
      }
      .table tbody + tbody {
        border-top: 2px solid #ddd;
      }
      .table-condensed th,
      .table-condensed td {
        padding: 4px 5px;
      }
      .table-bordered {
        border: 1px solid #ddd;
        border-collapse: separate !important;
        *border-collapse: collapse;
        border-left: 0;
        border-radius: 4px;
      }
      .table-bordered th,
      .table-bordered td {
        border-left: 1px solid #ddd;
      }
      .table-bordered caption + thead tr:first-child th,
      .table-bordered caption + tbody tr:first-child th,
      .table-bordered caption + tbody tr:first-child td,
      .table-bordered colgroup + thead tr:first-child th,
      .table-bordered colgroup + tbody tr:first-child th,
      .table-bordered colgroup + tbody tr:first-child td,
      .table-bordered thead:first-child tr:first-child th,
      .table-bordered tbody:first-child tr:first-child th,
      .table-bordered tbody:first-child tr:first-child td {
        border-top: 0;
      }
      .table-bordered thead:first-child tr:first-child th:first-child,
      .table-bordered tbody:first-child tr:first-child td:first-child {
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
      }
      .table-bordered thead:first-child tr:first-child th:last-child,
      .table-bordered tbody:first-child tr:first-child td:last-child {
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
      }
      .table-bordered thead:last-child tr:last-child th:first-child,
      .table-bordered tbody:last-child tr:last-child td:first-child,
      .table-bordered tfoot:last-child tr:last-child td:first-child {
        border-radius: 0 0 0 4px;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
      }
      .table-bordered thead:last-child tr:last-child th:last-child,
      .table-bordered tbody:last-child tr:last-child td:last-child,
      .table-bordered tfoot:last-child tr:last-child td:last-child {
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
      }
      .table-bordered caption + thead tr:first-child th:first-child,
      .table-bordered caption + tbody tr:first-child td:first-child,
      .table-bordered colgroup + thead tr:first-child th:first-child,
      .table-bordered colgroup + tbody tr:first-child td:first-child {
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
      }
      .table-bordered caption + thead tr:first-child th:last-child,
      .table-bordered caption + tbody tr:first-child td:last-child,
      .table-bordered colgroup + thead tr:first-child th:last-child,
      .table-bordered colgroup + tbody tr:first-child td:last-child {
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -moz-border-radius-topleft: 4px;
      }
      .table-striped tbody tr:nth-child(odd) td,
      .table-striped tbody tr:nth-child(odd) th {
        background-color: #f9f9f9;
      }
      .table-hover tbody tr:hover td,
      .table-hover tbody tr:hover th {
        background-color: #f5f5f5;
      }
      table [class*=span],
      .row-fluid table [class*=span] {
        display: table-cell;
        float: none;
        margin-left: 0;
      }
      .table .span1 {
        float: none;
        width: 44px;
        margin-left: 0;
      }
      .table .span2 {
        float: none;
        width: 124px;
        margin-left: 0;
      }
      .table .span3 {
        float: none;
        width: 204px;
        margin-left: 0;
      }
      .table .span4 {
        float: none;
        width: 284px;
        margin-left: 0;
      }
      .table .span5 {
        float: none;
        width: 364px;
        margin-left: 0;
      }
      .table .span6 {
        float: none;
        width: 444px;
        margin-left: 0;
      }
      .table .span7 {
        float: none;
        width: 524px;
        margin-left: 0;
      }
      .table .span8 {
        float: none;
        width: 604px;
        margin-left: 0;
      }
      .table .span9 {
        float: none;
        width: 684px;
        margin-left: 0;
      }
      .table .span10 {
        float: none;
        width: 764px;
        margin-left: 0;
      }
      .table .span11 {
        float: none;
        width: 844px;
        margin-left: 0;
      }
      .table .span12 {
        float: none;
        width: 924px;
        margin-left: 0;
      }
      .table .span13 {
        float: none;
        width: 1004px;
        margin-left: 0;
      }
      .table .span14 {
        float: none;
        width: 1084px;
        margin-left: 0;
      }
      .table .span15 {
        float: none;
        width: 1164px;
        margin-left: 0;
      }
      .table .span16 {
        float: none;
        width: 1244px;
        margin-left: 0;
      }
      .table .span17 {
        float: none;
        width: 1324px;
        margin-left: 0;
      }
      .table .span18 {
        float: none;
        width: 1404px;
        margin-left: 0;
      }
      .table .span19 {
        float: none;
        width: 1484px;
        margin-left: 0;
      }
      .table .span20 {
        float: none;
        width: 1564px;
        margin-left: 0;
      }
      .table .span21 {
        float: none;
        width: 1644px;
        margin-left: 0;
      }
      .table .span22 {
        float: none;
        width: 1724px;
        margin-left: 0;
      }
      .table .span23 {
        float: none;
        width: 1804px;
        margin-left: 0;
      }
      .table .span24 {
        float: none;
        width: 1884px;
        margin-left: 0;
      }
      .table tbody tr.success td {
        background-color: #dff0d8;
      }
      .table tbody tr.error td {
        background-color: #f2dede;
      }
      .table tbody tr.warning td {
        background-color: #fcf8e3;
      }
      .table tbody tr.info td {
        background-color: #d9edf7;
      }
      .table-hover tbody tr.success:hover td {
        background-color: #d0e9c6;
      }
      .table-hover tbody tr.error:hover td {
        background-color: #ebcccc;
      }
      .table-hover tbody tr.warning:hover td {
        background-color: #faf2cc;
      }
      .table-hover tbody tr.info:hover td {
        background-color: #c4e3f3;
      }

      You can modify the colour values here to match your template.
    • Last Edit: 3 years 9 months ago by DanG.
    • The following users have thanked you: David Wolfman, techgal, Cheryl Microutsicos, Matt, deiahil

    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 20284
    • Thanks: 2857
    • messin' with stuff

    Re: Creating a Responsible Table, i.e. Responsive

    Posted 4 years 4 months ago
    • Nice!

      I haven't had a need to try yet... but RT's don't support the bootstrap ".table-responsive" class?

      getbootstrap.com/css/#tables
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics :woohoo:
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3224
    • Custom work done

    Re: Creating a Responsible Table, i.e. Responsive

    Posted 4 years 4 months ago
    • blam wrote:
      Nice!

      I haven't had a need to try yet... but RT's don't support the bootstrap ".table-responsive" class?

      getbootstrap.com/css/#tables

      There supposed to but here is a snap at of the Responsive Tables section of the link you provided. The emulator is at Mobile 320x480 mode:
      This image is hidden for guests.
      Please log in or register to see it.


      I prefer the vertical stack layout versus scroll bars - I just don't like scroll bars :rolleyes:
    • Last Edit: 4 years 4 months ago by DanG.
    • The following users have thanked you: David Wolfman, Tim Miller

    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 20284
    • Thanks: 2857
    • messin' with stuff

    Re: Creating a Responsible Table, i.e. Responsive

    Posted 4 years 4 months ago
    • Aw, I see now... MUCH sexier to stack the row than a scrollbar :)
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics :woohoo:
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3224
    • Custom work done

    Re: Creating a Responsible Table, i.e. Responsive

    Posted 4 years 4 months ago
    • All in the eye of the beholder ;)
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 20284
    • Thanks: 2857
    • messin' with stuff

    Re: Creating a Responsible Table, i.e. Responsive

    Posted 4 years 4 months ago
    • OP CSS Code needs a closing } at the very end ;)
    • The following users have thanked you: DanG

    • SEARCH the forum first! These boards are rich in knowledge and vast in topics :woohoo:
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3224
    • Custom work done

    Re: Creating a Responsible Table, i.e. Responsive

    Posted 4 years 4 months ago
    • blam wrote:
      OP CSS Code needs a closing } at the very end ;)

      Thanks so much - appreciated
      This image is hidden for guests.
      Please log in or register to see it.
    • Matt M's Avatar
    • Matt M
    • Rocketeer
    • Posts: 58
    • Thanks: 0

    Re: Creating a Responsible Table, i.e. Responsive

    Posted 4 years 3 weeks ago
    • Using this currently. It's fantastic.
      Question: I have a table that I want to specifically exclude from this behavior. How would I best go about this? I tried using the :not() selector but with no success. (Not quite sure I grasp how to use that selector properly).
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3224
    • Custom work done

    Re: Creating a Responsible Table, i.e. Responsive

    Posted 4 years 3 weeks ago
    • Cirris Systems wrote:
      Question: I have a table that I want to specifically exclude from this behavior. How would I best go about this?

      I've edited the Guide so you can now choose which tables should be Responsive or not.
  • Re: Creating a Responsible Table, i.e. Responsive

    Posted 3 years 11 months ago
    • Thank you very much, the tables are perfect now, totally responsive.

Time to create page: 0.161 seconds