Support Forum - Topic: Responsive tables in Choices theme

Support Forum - Topic: Responsive tables in Choices theme http://www.kriesi.at/support/topic/responsive-tables-in-choices-theme Support Forum - Topic: Responsive tables in Choices theme en-US Thu, 23 May 2013 06:20:10 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Mya on "Responsive tables in Choices theme" http://www.kriesi.at/support/topic/responsive-tables-in-choices-theme#post-68383 Mon, 30 Jul 2012 19:33:19 +0000 Mya 68383@http://www.kriesi.at/support/ <p>Hi,</p> <p>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.</p> <p>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.</p> <p>HTML:</p> <pre><code><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></code></pre> <p>CSS:</p> <pre><code>/* 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; } }</code></pre> <p>Hope this helps!</p> <p>Regards,<br /> Mya </p> orv600 on "Responsive tables in Choices theme" http://www.kriesi.at/support/topic/responsive-tables-in-choices-theme#post-68299 Mon, 30 Jul 2012 07:47:36 +0000 orv600 68299@http://www.kriesi.at/support/ <p>The tables shortcode is really nice and handy but is not responsive as the rest of the theme.</p> <p>Is there any way you can add responsive table to Choices or at least, assist me with a quick fix to my site?<br /> Here is a nice solution (need to be implemented on the theme):<br /> <a href="http://css-tricks.com/examples/ResponsiveTables/responsive.php" rel="nofollow">http://css-tricks.com/examples/ResponsiveTables/responsive.php</a></p> <p>It's ok for me to add tables code manually like suggested here:<br /> <a href="http://www.kriesi.at/support/topic/responsive-tables" rel="nofollow">http://www.kriesi.at/support/topic/responsive-tables</a></p> <p>Thanks in advance,<br /> ORV600 </p>