RocketTheme - TOPIC: Creating a Responsible Table, i.e. Responsive (1/3)

Welcome Guest! Login

0 items Join Now

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

Creating a Responsible Table, i.e. Responsive

Posted 10 years 8 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: 10 years 1 month ago by DanG.
The following users have thanked you: David Wolfman, techgal, Cheryl Microutsicos, Matt, deiahil

#1077120

- Matt
- Preeminent Rocketeer
- Posts: 22057
- Thanks: 3191
- messin' with stuff
Re: Creating a Responsible Table, i.e. Responsive

Posted 10 years 8 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. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
#1077181
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Creating a Responsible Table, i.e. Responsive

Posted 10 years 8 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
- Last Edit: 10 years 8 months ago by DanG.
- The following users have thanked you: David Wolfman, Tim Miller
#1077192
- Matt
- Preeminent Rocketeer
- Posts: 22057
- Thanks: 3191
- messin' with stuff
Re: Creating a Responsible Table, i.e. Responsive

Posted 10 years 8 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. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
#1077194
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Creating a Responsible Table, i.e. Responsive

Posted 10 years 8 months ago
- All in the eye of the beholder
#1077195
- Matt
- Preeminent Rocketeer
- Posts: 22057
- Thanks: 3191
- messin' with stuff
Re: Creating a Responsible Table, i.e. Responsive

Posted 10 years 8 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. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
#1080341
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Creating a Responsible Table, i.e. Responsive

Posted 10 years 8 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.
#1080355
- Matt M
- Rocketeer
- Posts: 71
- Thanks: 0
Re: Creating a Responsible Table, i.e. Responsive

Posted 10 years 4 months 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).
#1113006
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Creating a Responsible Table, i.e. Responsive

Posted 10 years 4 months 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.
#1113180
- Muntiu Ioana
- Newbie
- Posts: 6
- Thanks: 0
Re: Creating a Responsible Table, i.e. Responsive

Posted 10 years 3 months ago
- Thank you very much, the tables are perfect now, totally responsive.
#1124137