Table in the mobile version

• 

  ishevchik · Member · Apr 11, 2017 at 9:00 am

  • Copy link
  • Add topic to favorites

  Hello! I need help. The table on the page “Как мы это делаем”off-set in the mobile version. Can I able to set it to display the last column in each row as a new row?
  can you help me change this?

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 11, 2017 at 9:27 am

  • Copy link

  Hello @ishevchik,
  Read this article by CSS Tricks: https://css-tricks.com/responsive-data-tables/, it provides a step by step guide on how to make the table look good on mobile devices.

  If you don’t wanna read the article then, here’s the CSS code that you wanna add to your site to make the table responsive(make the table look good on mobile devices-as given on that article):

  /*
  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"; }
  }

  Use this code and make changes to the values if needed.

  Hope this helps :)

• 

  ishevchik · Member · Apr 11, 2017 at 10:47 am

  • Copy link

  Thank you so much! Its a good idea. I used this code for my site and it worked. Only “Label the data” I change on
  td:nth-of-type(1):before {
  }

  td:nth-of-type(2):before {
  }

  because these labels overlapped the main text

• 

  otpidusprime · Member · Apr 11, 2017 at 10:57 am

  • Copy link

  Awesome! Glad it worked.
  Let us know if you need help with something more :)