Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #14843

    The tables shortcode is really nice and handy but is not responsive as the rest of the theme.

    Is there any way you can add responsive table to Choices or at least, assist me with a quick fix to my site?

    Here is a nice solution (need to be implemented on the theme):

    http://css-tricks.com/examples/ResponsiveTables/responsive.php

    It’s ok for me to add tables code manually like suggested here:

    http://www.kriesi.at/support/topic/responsive-tables

    Thanks in advance,

    ORV600

    #85114

    Hi,

    Since adding table codes manually isn’t a problem for you then you can add the HTML portion of the table to Pages > Whatever your page is then add the CSS portfolio to your custom.css located in /wp-content/themes/choices/css/ or your Quick CSS under Choices > Theme Options > Styling and Layout.

    Note though adding this CSS to custom.css or Quick CSS may override all or some of the existing table formatting Kriesi has done. So you may experience some odd behavior. If you do, you’re welcome to come back here and we can try to help solve. We would need though a link to the page.

    HTML:

    <table>
    <thead>
    <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Job Title</th>
    <th>Favorite Color</th>
    <th>Wars or Trek?</th>
    <th>Name</th>
    <th>Date of Birth</th>
    <th>Dream Vacation City</th>
    <th>GPA</th>
    <th>Arbitrary Data</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>James</td>
    <td>Matman</td>
    <td>Chief Sandwich Eater</td>
    <td>Lettuce Green</td>
    <td>Trek</td>
    <td>Digby Green</td>
    <td>January 13, 1979</td>
    <td>Gotham City</td>
    <td>3.1</td>
    <td>RBX-12</td>
    </tr>
    <tr>
    <td>The</td>
    <td>Tick</td>
    <td>Crimefighter Sorta</td>
    <td>Blue</td>
    <td>Wars</td>
    <td>John Smith</td>
    <td>July 19, 1968</td>
    <td>Athens</td>
    <td>N/A</td>
    <td>Edlund, Ben (July 1996).</td>
    </tr>
    <tr>
    <td>Jokey</td>
    <td>Smurf</td>
    <td>Giving Exploding Presents</td>
    <td>Smurflow</td>
    <td>Smurf</td>
    <td>Smurflane Smurfmutt</td>
    <td>Smurfuary Smurfteenth, 1945</td>
    <td>New Smurf City</td>
    <td>4.Smurf</td>
    <td>One</td>
    </tr>
    <tr>
    <td>Cindy</td>
    <td>Beyler</td>
    <td>Sales Representative</td>
    <td>Red</td>
    <td>Wars</td>
    <td>Lori Quivey</td>
    <td>July 5, 1956</td>
    <td>Paris</td>
    <td>3.4</td>
    <td>3451</td>
    </tr>
    <tr>
    <td>Captain</td>
    <td>Cool</td>
    <td>Tree Crusher</td>
    <td>Blue</td>
    <td>Wars</td>
    <td>Steve 42nd</td>
    <td>December 13, 1982</td>
    <td>Las Vegas</td>
    <td>1.9</td>
    <td>Under the couch</td>
    </tr>
    </tbody>
    </table>

    CSS:

    /*
    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 */
    table, thead, tbody, th, td, tr {
    display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    }

    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;
    }

    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "First Name"; }
    td:nth-of-type(2):before { content: "Last Name"; }
    td:nth-of-type(3):before { content: "Job Title"; }
    td:nth-of-type(4):before { content: "Favorite Color"; }
    td:nth-of-type(5):before { content: "Wars of Trek?"; }
    td:nth-of-type(6):before { content: "Porn Name"; }
    td:nth-of-type(7):before { content: "Date of Birth"; }
    td:nth-of-type(8):before { content: "Dream Vacation City"; }
    td:nth-of-type(9):before { content: "GPA"; }
    td:nth-of-type(10):before { content: "Arbitrary Data"; }
    }

    /* Smartphones (portrait and landscape)
    */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    body {
    padding: 0;
    margin: 0;
    width: 320px; }
    }

    /* iPads (portrait and landscape)
    */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
    width: 495px;
    }
    }

    Hope this helps!

    Regards,

    Mya

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Responsive tables in Choices theme’ is closed to new replies.