Responsive tables in Choices theme

2 posts from 2 voices

• Started 9 months ago by orv600
• Latest reply from Mya
• This topic is not a support question

Tags:

• responsive tables

1. 

   orv600
   Member

   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

   Posted 9 months ago #
2. 

   Mya
   

   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

   Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.