Need help? Check out our Support site, then


Table in the mobile version

  1. 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 fhrent.com.

  2. 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 :)

  3. 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

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

Topic Closed

This topic has been closed to new replies.

About this Topic